jQuery对checkbox 复选框的全选全不选反选的操作

前端之家收集整理的这篇文章主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码

HTML代码

301_10@
Box" id="all"> 全选/全不选

jquery代码

Box").attr("checked",this.checked); }); $("[name=items]:checkBox").click(function(){ var flag=true; $("[name=items]:checkBox").each(function(){ if(!this.checked){ flag=false; } }); $("#all").attr("checked",flag); }) //全选 $("#selectAll").click(function(){ $("[name=items]:checkBox").each(function(){ $(this).attr("checked",true); }); }); //全不选 $("#unSelect").click(function(){ $("[name=items]:checkBox").each(function(){ $(this).attr("checked",false); }); }); //反选 $("#reverse").click(function(){ $("[name=items]:checkBox").each(function(){ //遍历每一个复选框 //$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值 this.checked=!this.checked; //js方法 }); }); //输出选中的值 $("#btn").click(function(){ var str="你选中的是:\r\n"; $("[name=items]:checkBox:checked").each(function(){ str+=$(this).val()+"\r\n"; }); alert(str); }); })

注:由于jquery版本的变更,新版本出现只能点击一次,老一点的版本是可以的,新的版本不可以使用attr来设置选中状态了,第一种解决方法是可以使用js原生的方法this.checked=true/false;

第二种解决方法是把attr换成prop。

以上所述是小编给大家介绍的jQuery对checkBox 复选框的全选全不选反选的操作。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章