案例:全选按钮和取消全选
① 全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
② 下面复选框需要全部选中,上面全选才能选中做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的,上面全选按钮就不选中。
<script> // 1. 全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = document.getElementById('j_tb').getElementByTagName('input'); // 下面所有的复选框 // 注册事件 j_cbAll.onclick = function() { // this.checked 它可以得到当前复选框的选中状态,如果是true就是选中,如果是false就是未选中 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].checked = this.checked; } } // 2. 下面复选框需要全部选中,上面全选按钮才能选中。给下面所有复选框绑定点击事件 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].checked = function() { // flag控制全选按钮是否选中 var flag = true; // 每次点击下面的复选框都要循环检查这4个小按钮是否全被选中 for (var j = 0; j < j_tbs.length; j++) { // 如果有一个复选框没选中,则flag为false if (!j_tbs[j].checked) { flag = false; break; } } j_cbAll.checked = flag; } } </script>