9.27dom再练习 

    <body>
        <table>
            <tr>
                <td>

                    <input type="checkbox" id="check_all" />
                    <label for="check_all">全选</label>
                    <input type="checkbox" id="reverse" />
                    <label for="reverse">反选</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="items" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="items" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="items" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="items" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="items" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="items" />
                </td>
            </tr>
        </table>
    </body>

</html>
<script>
    var check = document.getElementById("check_all");
    var reverse = document.getElementById("reverse");

    var items = document.getElementsByClassName("items");

    check.onchange = function() {
        if(check.checked) {
            for(var x in items) {
                items[x].checked = true;
            }
        } else {
            for(var x in items) {
                items[x].checked = false;
            }
        }
    }
    for(var z in items) {
        items[z].onchange = function() {
            if(!this.checked) {
              alert(this.checked);
                check.checked = false;
            }else{
                var status = 0;
                for(var y in items){
                    if(items[y].checked == false){
                        status = 1;
                        alert(y);
                    }
                }
                if(status == 0){
                    check.checked = true;
                }
            }
        }
    }
    
    reverse.onclick = function(){
        for(var x in items){
//            if(items[x].checked){
//                items[x].checked = false;
//            }else{
//                items[x].checked = true;
//            }
            items[x].checked = items[x].checked?false:true;
        }
    }
</script>
昨天的作业 全选反选

 

posted @ 2017-09-27 19:28  sistrong  阅读(101)  评论(0)    收藏  举报