JavaScript实现全选反选
程序员文章站
2023-11-23 08:21:58
html代码
html代码
<label for="all">全选</label><input type="checkbox" id="all"> <p id="box"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </p>
js代码
var all = document.getelementbyid("all"); var ainput = document.queryselectorall("#box>input"); all.onclick = function () { if (this.checked) { for (var i = 0; i < ainput.length; i++) { ainput[i].checked = true; } } else { for (var i = 0; i < ainput.length; i++) { ainput[i].checked = false; } } }; for (var i = 0; i < ainput.length; i++) { ainput[i].onclick = function () { var bstop = true; for (var k = 0; k < ainput.length; k++) { if (!ainput[k].checked) { bstop = false; break; } } if (bstop) { all.checked = true; } else { all.checked = false; } } }
下一篇: 蜀南竹海旅游攻略(自驾游路线怎么走)