簡單聊聊今天遇到的js中屬性值
寫一個checkbox的全選，取消，反選，全選和取消都是判斷checked屬性之後利setAttribute和removeAttribute去做，可這樣的結果就是執行反選後就無法再去執行全選或者取消。糾結了好久找不到解決方法，還好身邊有大神，簡單看了看指出了鄙人的錯誤；
如果用remove或者set去修改了原有屬性，那麼如圖這種情況就無法執行了，因為再反選的過程中已經對屬性checked進行了修改或移除
這就直接導緻你再去執行set或者時系統已經找不到checked值，是以bug就來了，解決方法其實也很簡單的，不執行remove或者set，而是直接用true or false決定是否選中，完美避開問題，實際開發中這種問題會很常見，是以大多數人會直接選用布爾類型去做判斷規避出現這種情況
源碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全選" οnclick="CheckAll()"/>
<input type="button" value="取消" οnclick="CancleAll()"/>
<input type="button" value="反選" οnclick="ReverseAll()"/>
<table border="1">
<thead>
<tr>
<th>序 号</th>
<th>用 戶</th>
<th>密 碼</th>
</tr>
</thead>
<tbody id="i1">
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>33</td>
</tr>
</tbody>
</table>
<script>
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');
}
}
}
</script>
</body>
</html>
![checkbox控件的checked屬性作用是_VB常用控件屬性講解單選按鈕、複選框總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)