微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery checkbox的相关操作总结

jquery checkBox的相关操作——全选、反选、获得所有选中的checkBox

1、全选

rush:js;"> $("#btn1").click(function(){ $("input[name='checkBox']").attr("checked","true"); })

2、取消全选(全不选)

rush:js;"> $("#btn2").click(function(){ $("input[name='checkBox']").removeAttr("checked"); })

3、选中所有奇数

rush:js;"> $("#btn3").click(function(){ $("input[name='checkBox']:odd").attr("checked","true"); })

4、选中所有偶数

rush:js;"> $("#btn6").click(function(){ $("input[name='checkBox']:even").attr("checked","true"); })

5、反选

rush:js;"> $("#btn4").click(function(){ $("input[name='checkBox']").each(function(){ if($(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked","true"); } }) })

或者

rush:js;"> $("#invert").click(function(){ $("#ruleMessage [name='delModuleID']:checkBox").each(function(i,o){ $(o).attr("checked",!$(o).attr("checked")); }); });

6、获取选择项的值

rush:js;"> var aa=""; $("#btn5").click(function(){ $("input[name='checkBox']:checkBox:checked").each(function(){ aa+=$(this).val() }) document.write(aa); }) })

7、遍历选中项

rush:js;"> $("input[type=checkBox][checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出 alert($(this).val()); });

8、例子

rush:js;"> 无标题
Box" name="checkBox" value="checkBox1"> checkBox1 Box" name="checkBox" value="checkBox2"> checkBox2 Box" name="checkBox" value="checkBox3"> checkBox3 Box" name="checkBox" value="checkBox4"> checkBox4 Box" name="checkBox" value="checkBox5"> checkBox5 Box" name="checkBox" value="checkBox6"> checkBox6 Box" name="checkBox" value="checkBox7"> checkBox7 Box" name="checkBox" value="checkBox8"> checkBox8

9、效果

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐