解决全选小bug

差回来准备下一次出差的项目,各种崩溃。幸亏之前弄了点php和mysql,还是我有先见之明,结果这次用上了。每天干到很晚,真觉得事件不够用,知识不够用。

今天这两天网超级差,发个短的吧。早上正好用jquery写了一个功能,联选功能。当然这很简单,记得以前好像是写过,但是懒得找了,打开就写。

先看一下图:

1

第一次写的

varkg=true;

$('input[name="all"]').click(function(){

if(kg) {

$('input[type=checkbox]').attr('checked',true);

kg=false;

}else{

$('input[type=checkbox]').removeAttr("checked");

kg=true;

}

});

感觉好随意啊~

看效果:

第一次确实全选了很随意,而第二次就扯了。。。

因为checked是checkbox的固有属性使用attr是直接删除设置属性可能会导致浏览器产生错误导致js无法继续执行

貌似是说过这件事,忘记了,那么这次看看重新写了一下。

02

第二次写的

$("input[name='all']").click(function(){

//全选

$("input[type='checkbox'][name='check']")

.prop("checked",true);

if($("input[type='checkbox'][name='all")

.prop("checked")) {

$("input[type='checkbox'][name='all']")

.prop("checked",true);

}else{

//取消全选

$("input[type='checkbox'][name='all']")

.prop("checked",false);

$("input[type='checkbox'][name='check']")

.prop("checked",false);

}

});

于是。。。。。。它好了~~~

prop()获取匹配的元素的属性值。

这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法.

区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。

这个布尔型的属性,再解释一下,是属性值只有true|false的属性。

就是说和版本也有关系,因jquery版本问题,改checked属性不能使用attr()方法,应使用prop()方法,不然将出现全选功能只第一次的问题。

本微信号所有内容为前端客用户原创,前端客已获得独家授权,欢迎分享。

如有转载需求请留言征询,对于未经许可私自篡改内容、转载的行为我们保留追究维权的合法权利!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180510G0RQO300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券