checked js 获取值_js基础属性值checked大坑

简单聊聊今天遇到的js中属性值

写一个checkbox的全选，取消，反选，全选和取消都是判断checked属性之后利setAttribute和removeAttribute去做，可这样的结果就是执行反选后就无法再去执行全选或者取消。纠结了好久找不到解决方法，还好身边有大神，简单看了看指出了鄙人的错误；如果用remove或者set去修改了原有属性，那么如图这种情况就无法执行了，因为再反选的过程中已经对属性checked进行了修改或移除

这就直接导致你再去执行set或者时系统已经找不到checked值，所以bug就来了，解决方法其实也很简单的，不执行remove或者set，而是直接用true or false决定是否选中，完美避开问题，实际开发中这种问题会很常见，所以大多数人会直接选用布尔类型去做判断规避出现这种情况

源码如下

Title

序 号用 户密 码

111222333

function CheckAll() {

//根据id找到对应的tbody标签

var tb = document.getElementById('i1');

//找到tbody标签下的子类tr，再将其赋值给trs

var trs = tb.children;

//对trs内的每个标签进行循环，找到相应的td标签

for (var i = 0; i < trs.length; i++) {

//循环体中拿到对应的td标签并对其内容进行检索

var current_tr = trs[i];

//利用两次firstElementChild取得标签input

var ck = current_tr.firstElementChild.firstElementChild;

ck.checked = true;

// ck.setAttribute('checked', 'checked');

function CancleAll() {

var tb = document.getElementById('i1');

var trs = tb.children;

//在trs内循环

for (var i = 0; i < trs.length; i++) {

var current_tr = trs[i];

var ck = current_tr.firstElementChild.firstElementChild;

ck.checked = false;

// ck.removeAttribute('checked');

// if (0) {

// alert(2)

// ck.checked = true;

// javascript:void (0);

// } else {

// ck.checked = false;

// ck.removeAttribute('checked');

//

// }

}

}

function ReverseAll() {

var tb = document.getElementById('i1');

var trs = tb.children;

for (var i = 0; i < trs.length; i++) {

var current_tr = trs[i];

var ck = current_tr.firstElementChild.firstElementChild;

if (ck.checked) {

ck.checked = false;

// ck.removeAttribute("checked");

} else {

ck.checked = true;

// ck.setAttribute('checked', 'checked');

}

}

}