首页 > 其他 > 详细

DOM例题

时间:2017-09-27 15:59:47      阅读:235      评论:0      收藏:0      [点我收藏+]
    <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.反选按钮

DOM例题

原文:http://www.cnblogs.com/yangchuanqi/p/7601943.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!