DOM例题

Posted 我勒个去YCQ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.反选按钮

以上是关于DOM例题的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

JavaScript单行代码,也就是代码片段

获取get值&DOM例题

DOM综合例题之对图书添加修改删除操作

实用代码片段将json数据绑定到html元素 (转)

JS-DOM ~ 03. 子节点的操作style.样式和属性dom元素的创建方法及操作14个例题主要是利用js直接控制html属性