jquery全选/取消全选(反选)/单选操作

使用jQuery实现一组checkbox全选/取消全选,代码很简洁.

兴山网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。创新互联公司成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

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);
         });
});

这样修改以后,就正常了

 


分享标题:jquery全选/取消全选(反选)/单选操作
路径分享:http://bzwzjz.com/article/jphcss.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 教育网站设计方案 成都网站制作 成都响应式网站建设公司 外贸网站设计方案 营销型网站建设 成都网站制作 成都企业网站制作 重庆网站设计 成都品牌网站建设 泸州网站建设 重庆网站建设 网站设计公司 成都模版网站建设 网站建设费用 网站制作公司 网站设计 网站建设 成都网站设计公司 成都定制网站建设 手机网站制作 手机网站建设 成都网站设计