jquery一键控制checkbox全选、反选或全不选
更新时间:2017年10月16日 15:46:40 作者:chenze
这篇文章主要为大家详细介绍了jquery一键控制checkbox全选、反选或全不选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。
Hml的checkbox没有加name,只用了 div 嵌套。
如有更好的方法,望指点!!
//全选 $('#allChecked').change(function(){ $('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false); });
//反选 $('#invertChecked').change(function(){ if($(this).is(':checked')){ $('#box').children(':checkbox').each(function(){ $(this).prop('checked',$(this).is(':checked')?false:true); }); } });
//一键控制全选、反选、全不选 $('#orChecked').change(function(){ if($(this).is(':checked')){ var box = $('#box').children(':checkbox'); if(box.length==box.filter(':not(:checked)').length){ // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。 $('#box').children(':checkbox').prop('checked',true); }else{ // 如果有选中个数,-> 反选 $('#box').children(':checkbox').each(function(){ $(this).prop('checked',$(this).is(':checked')?false:true); }); }else{ $('#box').children(':checkbox').prop('checked',false); // 如控制键取消选中,剩余的checkbox也取消选中 } });
<div align="center"> <div id="box"> <input type="checkbox" value="1">西瓜 <input type="checkbox" value="2">芒果 <input type="checkbox" value="3">橙 <input type="checkbox" value="4">山竹 <input type="checkbox" value="5">草莓 <input type="checkbox" value="6">火龙果 </div> <br> <input type="checkbox" id="allChecked">全选 <input type="checkbox" id="invertChecked">反选 <input type="checkbox" id="orChecked">全选/反选/全不选 </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
IE8下Jquery获取select选中的值post到后台报错问题
IE8下出现的问题是直接将selectedValue post发送到后台,后台接收时会报错,这是因为IE8下selectedValue当成了数组,后台无法识别2014-07-07jquery validate 实现动态增加/删除验证规则操作示例
这篇文章主要介绍了jquery validate 实现动态增加/删除验证规则操作,结合实例形式分析了jQuery validate表单验证相关操作技巧,需要的朋友可以参考下2019-10-10jQuery 借助插件Lavalamp实现导航条动态美化效果
导航条动态显示效果借助插件Lavalamp可以轻松实现,以前用animate来实现,效果不是很好2013-09-09jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
JavaScript中设置元素的浮动属性(float),标准浏览器使用cssFloat,IE旧版本使用styleFloat。2011-09-09清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
这篇文章主要介绍了清空元素html("")、innerHTML="" 与 empty()的区别和应用,详细介绍了三者之间的原理及应用,需要的朋友可以参考下2017-08-08jQuery ajax serialize() 方法使用示例
serialize() 方法创建以标准 URL 编码表示的文本字符串,下面为大家介绍下jQuery serialize方法的使用2014-11-11
最新评论