checkbox操作全选、反选、取消

createlement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1px">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>
    <script>
        var inputs=document.getElementsByTagName("input");
        function selectAll() {
            for(var i=0;i<inputs.length;i++){
                input=inputs[i];
                input.checked=true;
            }
        }
        function cancel() {
             for(var i=0;i<inputs.length;i++) {
                 input = inputs[i];
                 input.checked = false;
             }
        }
        function reverse() {
            for(var i=0;i<inputs.length;i++) {
                 input = inputs[i];
                 if(input.checked){
                    input.checked=false;
                 }else{
                     input.checked=true;
                 }
            }
        }
    </script>
</body>
</html>

 

posted @ 2018-06-20 15:01  未来的技术  阅读(169)  评论(0)  编辑  收藏  举报