DOM例题 - 我勒个去YCQ

DOM例题

    <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) {
                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){
            items[x].checked = items[x].checked?false:true;
        }
    }
</script>

全选框
1.点全选全部选择
2.取消全选全部取消选择
3.全选时取消单个选项全选框取消选择
4.未全选时所有单个选项选择全选框选择
5.反选按钮

posted on 2017-09-27 15:24 我勒个去YCQ 阅读(151) 评论(0) 收藏举报