jQuery对checkbox 复选框的全选全不选反选的操作
更新时间：2016年08月09日 09:21:17 作者：星光-
这篇文章主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
先给大家展示下效果图，如果大家感觉还不错，请继续参考实现代码。
HTML代码：
<body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><input type="checkbox" name="items" value="2"> 2.海阔天空</label></li> <li><label><input type="checkbox" name="items" value="3"> 3.真的爱你</label></li> <li><label><input type="checkbox" name="items" value="4"> 4.不再犹豫</label></li> <li><label><input type="checkbox" name="items" value="5"> 5.光辉岁月</label></li> <li><label><input type="checkbox" name="items" value="6"> 6.喜欢妳</label></li> </ul> <input type="checkbox" id="all"> 全选/全不选</br> <input type="button" value="全选" class="btn" id="selectAll"> <input type="button" value="全不选" class="btn" id="unSelect"> <input type="button" value="反选" class="btn" id="reverse"> <input type="button" value="获得选中的所有值" id="btn" id="getValue"> </body>
jquery代码：
<script type="text/javascript">
$(function(){
//全选/全不选
$("#all").click(function(){
$("[name=items]:checkbox").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);
});
})
</script>
注：由于jquery版本的变更，新版本出现只能点击一次，老一点的版本是可以的，新的版本不可以使用attr来设置选中状态了，第一种解决方法是可以使用js原生的方法this.checked=true/false;
第二种解决方法是把attr换成prop。
以上所述是小编给大家介绍的jQuery对checkbox 复选框的全选全不选反选的操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
用jquery对表单进行客户端验证demo ，学习jquery的朋友可以参考下。2009-08-08
这篇文章主要为大家详细介绍了jquery实现淘宝详情页选择套餐，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了jQuery Ajax调用WCF服务详细教程,本文讲解了从WFC编程到JQUERY调用的详细步骤,并总结了使用中遇到的问题和解决方法,需要的朋友可以参考下2015-03-03
重复提交给网站服务端带来很大的压力，下面小编给大家分享一段代码关于jQuery如何防止Ajax重复提交，感兴趣的朋友一起看看吧2016-10-10
本文通过代码给大家介绍了jQuery模拟爆炸倒计时功能实例代码，非常不错，代码简单易懂，需要的朋友参考下吧2017-08-08
最近项目中用到类似百度的输入框，于是自己用jquery写了一个。希望和大家共同分享一下。存在许多bug，请各位不吝赐教。2011-04-04
这篇文章主要为大家详细介绍了jquery实现图片平滑滚动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
JQuery日历插件My97DatePicker日期范围限制
这篇文章主要介绍了JQuery日历插件My97DatePicker日期范围限制的相关资料,需要的朋友可以参考下2016-01-01
animate用于创建自定义动画的函数，这个函数的关键在于指定动画形式及结果样式属性对象，接下来为大家介绍下它的使用方法，感兴趣的朋友可以参考下哈2013-03-03
这篇文章主要介绍了jQuery实现全选、反选和不选功能的方法,结合实例形式详细分析了jQuery全选、反选以及不选功能的相关原理、实现方法及操作注意事项,需要的朋友可以参考下2019-12-12
最新评论