如何利用jQuery插件获取checkbox选中个数和值

时间:2024-10-12 03:53:27

1、第一步,打开HBuilder软件工具,在web项目中创建静态页面checkbox.html,并引入jQuery核心js,修改title标签内的文字显示,如下图所示:

如何利用jQuery插件获取checkbox选中个数和值
如何利用jQuery插件获取checkbox选中个数和值

2、第二步,在主体内插入十个checkbox、一个按钮和一个输入框,按钮触发获取复选框的文字内容和选中的个数,输入框显示对应的内容,如下图所示:

如何利用jQuery插件获取checkbox选中个数和值

3、第三步,编辑js代码,获取选中复选框的个数,通过按钮点击事件并将数目放在第一个输入框内,如下图所示:

如何利用jQuery插件获取checkbox选中个数和值

4、第四步,在第一个输入框下方再插入一个输入框,用于放置选中checkbox的值,当按钮点击时获取,如下图所示:

如何利用jQuery插件获取checkbox选中个数和值

5、第五步,再次编辑js,遍历选中复选框,获取相邻label的值,并将值放在一个数组里,然后将数组字符串放到输入框中,如下图所示:

如何利用jQuery插件获取checkbox选中个数和值

6、第六步,设置完毕后,预览该静态页面;勾选五个checkbox,点击按钮获取checkbox的个数,并将值分别放在两个输入框内,查看页面效果,如下图所示:

如何利用jQuery插件获取checkbox选中个数和值
© 手抄报圈