达维营-前端网今天用原生JS做项目时发现chekbox勾选状态似乎不听使唤，经过一测试，把一个可用的文档整理出来了，仅供参考。
1、设置checkbox状态：
//itemsElement.setAttribute("checked", "checked");
//itemsElement.checked = this.checked;
itemsElement.checked = true;由于没研究太细致，前两种也可以设置，但在调试过程中会出现勾无法添加或去掉，或明明添加了”checked” = “checked”属性，但勾却不显示，很是诡异。
最后，我在编码中全部统一使用文章附带代码的写法。
2、去除checkbox状态：
//itemsElement.setAttribute("checked", null); 此写法，在最新浏览器中好像不支持
//itemsElement.removeAttribute('checked');
itemsElement.checked = false;
以下是测试文档，如有错误欢迎留言。
注意，源码中注释掉的部分，可能会导致运行诡异，不建议使用，或者有时间的话，请自行去调试，这点小东西，作者调试了许久。因为总是出现诡异的勾选状态，勾不显示。
好了，直接贴代码：
<!DOCTYPE >
<html>
<head>
<title>关于checkbox全选、全不选、反选，全选/全不选切换</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选"/>
<input type="button" name="checkall" id="uncheckall" value="全不选"/>
<input type="button" name="checkall" id="check_revsern" value="反选"/>
</body>
<script language="JavaScript">
var checkall = document.getElementById("checkall");
var uncheckall = document.getElementById('uncheckall');
var check_revsern = document.getElementById("check_revsern");
var itemsElements = document.getElementsByName("items");
//全选
checkall.onclick = function () {
var itemsElements = document.getElementsByName("items");
for (var i = 0; i < itemsElements.length; i++) {
var itemsElement = itemsElements[i];
//itemsElement.setAttribute("checked", "checked");
itemsElement.checked = true;
}
}
//全不选
uncheckall.onclick = function () {
for (var i = 0; i < itemsElements.length; i++) {
var itemsElement = itemsElements[i];
//itemsElement.removeAttribute('checked');
itemsElement.checked = false;
}
}
//反选
check_revsern.onclick = function () {
for (var i = 0; i < itemsElements.length; i++) {
var itemsElement = itemsElements[i];
if (itemsElement.checked == true) {
//itemsElement.removeAttribute('checked');
itemsElement.checked = false;
} else {
//itemsElement.setAttribute("checked", "checked");
itemsElement.checked = true;
}
}
}
//全选/全不选
document.getElementById("checkItems").onclick = function () {
for (var i = 0; i < itemsElements.length; i++) {
var itemsElement = itemsElements[i];
if (this.checked == true) {
//itemsElement.setAttribute("checked", "checked");
itemsElement.checked = true;
} else {
//itemsElement.removeAttribute('checked');
itemsElement.checked = false;
}
}
}
//非全选时，全选选择框去掉勾选
window.onload = function () {
var ach = document.getElementsByName("items");
var autocheckItems = document.getElementById("checkItems");
for (var i = 0; i < ach.length; i++) {
ach[i].onclick = function () {
if (!this.checked == true) {
//autocheckItems.removeAttribute('checked');
autocheckItems.checked = false;
}
};
}
}
</script>
</html>