js中的setAttribute方法问题

镜花Q水月 发布于 06/14 22:01
阅读 105
收藏 0

本人在学习js过程中,实现动态表全选按钮与下方列表同步功能时,使用setAttribute方法设置checked属性,遇到一些奇怪的问题,最后改为.checked=属性值 问题就解决了,想知道具体原因,百度上有说setAttribute方法不兼容之类的问题,但是我遇到的现象有点奇特,希望大佬指点。

具体情况如下,

var all = document.getElementById("all");//获取全选按钮
var ck = document.getElementsByClassName("ck");//获取列表按钮
         for (var i = 1; i < ck.length; i++) {
         ck[i].onclick = fflag;
     }
function fflag() {
    var flag = true;//标记,开始为true
    for (var i = 1; i < ck.length; i++) {//遍历列表
        if (!ck[i].checked) {//如果有false,则标记改为false
            flag = false;
        }
    }
    all.setAttribute("checked",flag);//全选按钮checked属性设置为flag
}

逻辑上感觉没有什么错误,但是实际情况是页面加载时全选按钮就已经被勾选,经过老师的建议,代码改为下方内容:

var all = document.getElementById("all");//获取全选按钮
var ck = document.getElementsByClassName("ck");//获取列表按钮
         for (var i = 1; i < ck.length; i++) {
         ck[i].onclick = fflag;
     }
function fflag() {
    for (var i = 1; i < ck.length; i++) {//遍历列表
        if (!ck[i].checked) {//如果有false,则结束方法
           return;
        }
    }
    all.setAttribute("checked",true);//全选按钮checked属性设置为true
}

代码改动后,页面加载时没有问题,列表按钮勾选完毕后,全选按钮会自动勾选,但是如果此时取消某个按钮,全选按钮不会取消,而且把全选按钮取消后,再次勾选列表全部按钮,全选按钮不会自动勾选,也就是只有第一次加载时生效,勾选过一次之后代码就无效了。最后代码改为如下情况:

var all = document.getElementById("all");//获取全选按钮
var ck = document.getElementsByClassName("ck");//获取列表按钮
         for (var i = 1; i < ck.length; i++) {
         ck[i].onclick = fflag;
     }
function fflag() {
    var flag = true;//标记,开始为true
    for (var i = 1; i < ck.length; i++) {//遍历列表
        if (!ck[i].checked) {//如果有false,则标记改为false
            flag = false;
        }
    }
    all.checked = flag;//全选按钮checked属性设置为flag
    // all.setAttribute("checked",flag);
}

与第一种基本相同,只有最后setAttribute改为“.属性=”,此时代码可以完成需求,取消列表某个按钮时,全选按钮会自动取消,而且再次全部勾选,全选按钮也会再次自动勾选。

情况比较奇怪,有点摸不着头脑,本来改为第二种情况可以生效一次时,以为setAttribute只有页面第一次加载才生效,但是后来改为“.属性=”,还是第一种代码,就直接可以用了,此时使用setAttribute代码逻辑却完全不生效,按钮直接被勾选,这个和加载就没有关系了,希望大佬帮忙解答一下,感激不尽~

加载中
1
Kit_lee
Kit_lee

checkbox或radio对象在设置调用checked时,修改的不是属性值,而是切换对象的选中状态

而setAttribute('checked','false')是对对象的属性进行赋值或修改值。你需要了解的是,checkbox或radio只需要有checked属性即为选中状态,而并非看checked的值是什么,不信你可以试试 <input type="checkbox" ckecked="false">这句在浏览器直接是否默认选中。如果你喜欢用setAttribute('checked', 'checked')控制选中的话,你可以用removeAttribute('checked')来去掉checked属性以达到你想做到的取消选中效果

镜花Q水月
镜花Q水月
谢谢谢谢,一下就指出问题了,因为一些全选反选的功能都是直接用.属性等于true或false了,误以为checked属性是个布尔值,实际上写的时候是checked或者checked="checked" 的写法,没有想过写别的东西,以为可以自动转换为布尔,其实字符串转布尔直接就为true了,老师也没注意到这个细节,感谢大佬
0
知尔
知尔
setAttribute设置的值得是字符串,如果不是字符串会调用toString方法转成字符串
镜花Q水月
镜花Q水月
对的,但是问题关键是在楼上大佬说的checked属性的问题,谢谢回答~
返回顶部
顶部