2018-08-19-Python全栈开发day43-正反选练习 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="empty()">全不选</button>
<button onclick="reverse()">反选</button>
<tr>
    <td>
        <input type="checkbox" class="input">
    </td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
</tr>
<tr>
    <td>
        <input type="checkbox" class="input">
    </td>
    <td>22</td>
    <td>22</td>
    <td>22</td>
</tr>
<tr>
    <td>
        <input type="checkbox" class="input" >
    </td>
    <td>33</td>
    <td>33</td>
    <td>33</td>
</tr>
<script>
    function selectAll() {
        var ele=document.getElementsByClassName('input');
        for(var i=0;i<ele.length;i++){
            ele[i].checked=true;
        }
    }
    function empty() {
        var ele=document.getElementsByClassName('input');
        for(var i=0;i<ele.length;i++){
            ele[i].checked=false;
        }
    }
    function reverse() {
        var ele=document.getElementsByClassName('input');
        for(var i=0;i<ele.length;i++) {
            if(ele[i].checked){
                ele[i].checked=false
            }else {
                ele[i].checked=true
            }
        }

    }

</script>
</body>
</html>

 

posted @ 2018-08-19 20:45  brownbearye  阅读(153)  评论(0)    收藏  举报