JS 实现全选/反选/取消

HTML代码：

    <input type="button" value="全选" onclick="checkAll()" />
    <input type="button" value="反选" onclick="reverseAll()" />
    <input type="button" value="取消" onclick="removeAll()" />
    <table width="200" border="0" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>IP地址</th>
                <th>端口</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input class="c1" type="checkbox"></td>
                <td>c1.com</td>
                <td>192.168.0.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox"></td>
                <td>c2.com</td>
                <td>192.168.0.2</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox"></td>
                <td>c3.com</td>
                <td>192.168.0.3</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

JS代码：

<script>
        function checkAll(){
            var trList = document.getElementById("tb").children;
            for(var i=0; i<trList.length;i++){
                var tr = trList[i];
                tr.firstElementChild.firstElementChild.checked = true;
            }
        }

        function reverseAll() {
            var trList = document.getElementById("tb").children;
            for(var i=0; i<trList.length; i++){
                var tr = trList[i];
                if(tr.firstElementChild.firstElementChild.checked){
                    tr.firstElementChild.firstElementChild.checked = false;
                }else{
                    tr.firstElementChild.firstElementChild.checked = true;
                }
            }

        }

        function removeAll() {
            var trList = document.getElementById("tb").children;
            for(var i=0; i<trList.length; i++){
                var tr = trList[i];
                if(tr.firstElementChild.firstElementChild.checked){
                    tr.firstElementChild.firstElementChild.checked = false;
                }
            }
        }
    </script>

 效果图：

 

JQuery版本:

    <script>
        $(".action-select-all").click(function () {
            var mySelect = document.getElementById("controlAll").checked;
            var checklist = document.getElementsByClassName("action-select")
            if(mySelect){
                for(var i=0; i<checklist.length; i++){
                    checklist[i].checked = true;
                }
            }
            else {
                for(var i=0; i<checklist.length; i++){
                    checklist[i].checked = false;
                }
            }
        });
    </script>

 

效果图：