JS checbox实现复选框的全选和反选（内附详细代码）

---

前言

提示：
1、灵活使用复选框的checked属性，当复选框选中时，checked属性为true，取消复选框选中时，checked属性为false。
2、灵活使用两种获取对象的方式：
document.getElementById(“id属性值”)
document.getElementByName(“name属性值”);

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、全选、反选需求描述？

1、当全选框被选中，所有复选框，全部被选上，再次点击全选框，所有复选框取消选中。
2、当全选框被选中时，取消非全选框的其中一个复选框，全选框，自动取消选中。
3、当所有非全选框的复选框被选中时，全选框自动被选中

二、代码详情

1.HTML代码

代码如下（示例）：

 	<input type="checkbox" id="firstCheck"><br>
 
    <input type="checkbox" name="habit" value="smoke">抽烟<br>
    
    <input type="checkbox"  name="habit" value="drink">喝酒<br>
    
    <input type="checkbox"  name="habit" value="fireHire">烫头<br>

2.JS代码

代码如下（示例）：

<script type="text/javascript">
        window.onload=function () {
            //获取第一个复选框对象
            var firstChk=document.getElementById("firstCheck")
            //获取所有name为habit的全部复选框,当除了第一个
            var habits=document.getElementsByName("habit")
            //当第一个复选框选中或取消选中时，其他复选框同时选中或取消
            firstChk.onclick=function () {
                for(var i=0;i<habits.length;i++){
                    habits[i].checked=firstChk.checked;
                }
            }


            //当所有复选框选中时，第一个全选复选框自动选中
            var all=habits.length;
            //循环遍历habits数组,给每个复选框绑定函数
            for(var i=0;i<all;i++) {
                habits[i].onclick= function () {
                    var checkCount=0;
                    for(var i=0;i<habits.length;i++){
                        if (habits[i].checked) {
                            checkCount++;
                        }
                    }
                    firstChk.checked = (all == checkCount)
                }
            }
        }
    </script>

3.测试结果

点击全选框

再次点击全选框

点击全选按钮后，取消抽烟框选中

再次选中抽烟框

---