扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
使用jQuery实现一组checkbox全选/取消全选,代码很简洁.
创新互联专注于企业营销型网站、网站重做改版、东营网站定制设计、自适应品牌网站建设、H5建站、商城网站制作、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为东营等各大城市提供网站开发制作服务。jquery版本:2.0
先看看HTML代码,很简单的操作框
全选 项1 项2 项3 项4
引入jquery库
对于checkbox的选择,实际上就是添加了一个属性:checked,不管value有没有值,都是选中状态,在程序里面,如果checked值选中,就是true,不存在就是false。
$(function() { $("#checkAll").click(function() { $('input[name="subBox "]'). attr ("checked",this.checked); }); var$sub = $("input[name=' subBox ']"); $sub.click(function(){ $("#checkAll").attr("checked",$sub.length==$("input[name='subBox']:checked").length ? true : false); }); });
这段代码在第一次正常可以全选和全不选,但是后面就没有效果,因为$('input[name=" subBox "]'). attr ("checked",this.checked)的值是undefined,因为在源代码里面没有这个属性。
查看jquery的api手册,发现了一个prop函数:
—————————-以下函数说明应用自jquery官方api———————————-
prop(name|properties|key,value|fn)
概述
获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误
参数
name
属性名称
properties
作为属性的“名/值对”对象
key,value
属性名称,属性值
key,function(index, attr)
1:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
——————————————以上函数说明应用自jquery官方api————————————–
prop()获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法.
区别大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。
这个布尔型的属性,再解释一下,是属性值只有true|false的属性。
还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
上面的代码将attr替换为prop:
$(function() { $("#checkAll").click(function() { $('input[name="subBox "]').prop("checked",this.checked); }); var$sub = $("input[name=' subBox ']"); $sub.click(function(){ $("#checkAll").prop("checked",$sub.length== $("input[name=' subBox ']:checked").length ? true : false); }); });
这样修改以后,就正常了
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流