首页 > 软件开发 > JQUERY >

如何使用jQuery方法获取复选框的值并拼接起来

来源:互联网 2023-03-17 00:46:48 版权归原作者所有,如有侵权,请联系我们

在jQuery中,可以使用change事件和each函数遍历循环复选框,并将拼接起来的ID属性赋值给result变量。下面利用一个实例说明如何获取复选框的值,操作如下:9Y3办公区 - 实用经验教程分享!

如何使用jQuery方法获取复选框的值并拼接起来9Y3办公区 - 实用经验教程分享!

工具/原料

  • HBuilder
  • CSS3
  • HTML5
  • jQuery
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    第一步,双击打开HBuilder编辑工具,新建一个静态页面ckb.html,如下图所示:9Y3办公区 - 实用经验教程分享!

    如何使用jQuery方法获取复选框的值并拼接起来9Y3办公区 - 实用经验教程分享!

  • 2

    第二步,在title>/title>标签元素下方,添加一个script>/script>标签,并引入jquery文件,如下图所示:9Y3办公区 - 实用经验教程分享!

    如何使用jQuery方法获取复选框的值并拼接起来9Y3办公区 - 实用经验教程分享!

  • 2
  • 3

    第三步,在body标签元素内插入一个div标签,然后插入四个input复选框,如下图所示:9Y3办公区 - 实用经验教程分享!

    如何使用jQuery方法获取复选框的值并拼接起来9Y3办公区 - 实用经验教程分享!

  • 4

    第四步,在jquery初始化函数内,调用each函数方法,遍历四个复选框,如下图所示:9Y3办公区 - 实用经验教程分享!

    如何使用jQuery方法获取复选框的值并拼接起来9Y3办公区 - 实用经验教程分享!

  • 5

    第五步,保存代码并在浏览器中预览界面效果,查看代码显示,如下图所示:9Y3办公区 - 实用经验教程分享!

    如何使用jQuery方法获取复选框的值并拼接起来9Y3办公区 - 实用经验教程分享!

  • 6

    第六步,勾选复选框发现控制台无打印结果,接着修改change和each的顺序,如下图所示:9Y3办公区 - 实用经验教程分享!

    如何使用jQuery方法获取复选框的值并拼接起来9Y3办公区 - 实用经验教程分享!

  • 注意事项

    • 注意如何获取复选框勾选的值
    • 注意each函数和change事件的用法

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!9Y3办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号