JS實現復選框的全選/全不選

比較簡單直接上demo代碼

html:

        <table border="1px solid" cellspacing="0px" bordercolor="red" width="500px" align="center" style="text-align: center;">
            <thead>
                <th>點擊右側實現全選/全不選</th>
                <th>
                    <input type="checkbox" name="IsAll" id="IsAll" onclick="isCheck()" />
                </th>
            </thead>
            <tbody>
                <tr>
                    <td>
                        張三
                    </td>
                    <td>
                        <input type="checkbox" name="c1" />
                    </td>
                </tr>
                <tr>
                    <td>
                        李四
                    </td>
                    <td>
                        <input type="checkbox" name="c1" />
                    </td>
                </tr>
            </tbody>
        </table>

 

JS代碼：

 

    function isCheck(){
                var IsCheck= document.getElementById("IsAll");
                if(IsCheck.checked==false){
                    var groupC= document.getElementsByName("c1");
                    for(var i=0;i<groupC.length;i++){
                        groupC[i].checked=false;
                    }
                }
                if (IsCheck.checked==true) {
                    var groupC= document.getElementsByName("c1");
                    for(var i=0;i<groupC.length;i++){
                        groupC[i].checked=true;
                    }
                }
                }