js 全选、反选、全不选、动态添加行、动态删除行

最新推荐文章于 2023-07-18 11:18:07 发布

guozh91

最新推荐文章于 2023-07-18 11:18:07 发布

阅读量1.9k

点赞数

文章标签： input function delete class null div

本文链接：https://blog.csdn.net/guozh90/article/details/7710554

版权

//动态添加行
        function AddLine() {
            var ul = document.getElementById("content_ul");
            var checkbox = document.createElement("input");
            checkbox.setAttribute("type", "checkbox");
            checkbox.setAttribute("name", "checkOne");
            var li = document.createElement("li");
            var txt = document.getElementById("Text1").value;
            if (txt == null || txt == "") {
                alert("对不起，您还没有添加节点文本");
            }
            else {
                li.appendChild(checkbox);
                li.appendChild(document.createTextNode(txt));
                ul.appendChild(li);
                document.getElementById("Text1").value = ""; //清空文本
                document.getElementById("Text1").focus(); //获取焦点
                document.getElementById("add").checked = false;
            }
        }
        //删除选中项
        function DeleteLine() {
            var ul = document.getElementById("content_ul");
            var li = document.getElementsByTagName("li");
            var single = document.getElementsByName("checkOne"); //选项
            for (var i = 0; i < single.length; i++) {
                if (single[i].checked == true) {
                    ul.removeChild(li[i]);
                    --i;
                }
            }
        }

<body>
    <div class="content">
        <ul id="content_ul">
            <li>
                <input id="Checkbox1" name="checkOne" type="checkbox" />苹果</li>
            <li>
                <input id="Checkbox2" name="checkOne" type="checkbox" />香蕉</li>
            <li>
                <input id="Checkbox3" name="checkOne" type="checkbox" />葡萄</li>
            <li>
                <input id="Checkbox4" name="checkOne" type="checkbox" />草莓</li>
            <li>
                <input id="Checkbox5" name="checkOne" type="checkbox" />芒果</li>
            <li>
                <input id="Checkbox6" name="checkOne" type="checkbox" />西瓜</li>
            <li>
                <input id="Checkbox7" name="checkOne" type="checkbox" />甜瓜</li>
        </ul>
        <input id="CheckALL" type="checkbox" οnclick="checkAll();" />全选
        <input id="NoCheckAll" type="checkbox" οnclick="noCheckAll();" />全不选
        <input id="inverse" type="checkbox" οnclick="inverseCheck()" />反选
        <input id="delete" type="checkbox" οnclick="DeleteLine();" />删除<br />
        动态添加行的文本：<input id="Text1" type="text" size="10" /><input id="add" type="checkbox"
            οnclick="AddLine();" />动态添加<br />
        </div>
    <script type="text/javascript">
        var all = document.getElementById("CheckALL"); //全选
        var single = document.getElementsByName("checkOne"); //选项
        var noAll = document.getElementById("NoCheckAll"); //不全选
        var inverse = document.getElementById("inverse"); //反选
       
        function checkTrue() {
            for (var i = 0; i < single.length; i++) {
                single[i].checked = true;
            }
        }
        function checkFalse() {
            for (var i = 0; i < single.length; i++) {
                single[i].checked = false;
            }
        }
        //全选
        function checkAll() {
            inverse.checked = false;
            if (all.checked == true) {
                noAll.checked = false;
                checkTrue();
            }
            else {
                noAll.checked = true;
                checkFalse();
            }
        }
        //全不选
        function noCheckAll() {
            inverse.checked = false;
            if (noAll.checked == true) {
                all.checked = false;
                checkFalse();
            }
            else {
                all.checked = true;
                checkTrue();
            }
        }
        //反选
        function inverseCheck() {
            noAll.checked = false;
            all.checked = false;
            for (var i = 0; i < single.length; i++) {
                single[i].checked = !single[i].checked;
            }
        }
    </script>
</body>

guozh91

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 全选、反选、全不选、动态添加行、动态删除行

//动态添加行 function AddLine() { var ul = document.getElementById("content_ul"); var checkbox = document.createElement("input"); checkbox.setAttribute("type", "
复制链接

扫一扫