利用javaScript实现的全选、反选(当子项全部选中的时候全选框中的勾自动打上)

来源：互联网发布：python最好的教材编辑：程序博客网时间：2024/05/17 23:57

<!doctype html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/bootstrap.min.css"><title>表单元素</title></head><body><div class="container"><input type="checkbox" name="" id="selectAll">全选<input type="checkbox" name="" id="selectOther">反选<ul class="select"><li><input type="checkbox" name="" id="ck">one</li><li><input type="checkbox" name="" id="ck">two</li><li><input type="checkbox" name="" id="ck">three</li><li><input type="checkbox" name="" id="ck">four</li></ul></div><script>                  (function() {                        //全局变量用来返回子选项的一个数组                        var cks = document.querySelectorAll("#ck");                        //全选document.querySelector("#selectAll").onclick = function() {    for(var index in cks) {cks[index].checked = this.checked;    }};                        //反选document.querySelector("#selectOther").onclick = function() {    for(var index in cks) {        cks[index].checked = !cks[index].checked;    }};//选中子选项document.querySelector(".select").onclick = function check() {    var count = 0;    for(var index in cks) {if(cks[index].checked) {            count++;}    }    if(count == 4) {document.querySelector("#selectAll").checked = true;    } else {        document.querySelector("#selectAll").checked = false;    }};})();</script></body></html>

0 0