案例三：全选

作者: 十六只猴子王 | 来源:发表于2019-04-10 21:19 被阅读0次

案例三：全选
js -- DOM
全选反选案例
Web-API-02
操作元素案例--表单全选取消案例
Antd Table无法选择&多选问题
JavaScript基础案例全选、反选
计提城建税及附加
计提城建税及附加
input text 得到焦点后自动全选

创建一个页面：四个复选框表示爱好，一个复选框全选和全不选，三个按钮，分别有事件：全选，全不选，反选

function：

获取操作的复选框
2.返回的是数组，遍历数组
3.得到每一个复选框
4.设置复选框的属性checked=false/true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
<br/>
<input type="checkbox" name="love"/>篮球🏀<br/>
<input type="checkbox" name="love"/>排球🏐️<br/>
<input type="checkbox" name="love"/>羽毛球🏸️<br/>
<input type="checkbox" name="love"/>乒乓球🏓️<br/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type="text/javascript">
    function selAll() {
        var loves = document.getElementsByName("love");
        for (var i = 0; i < loves.length; i++) {
            var love1 = loves[I];
            love1.checked = true;
        }
    }

    function selNo() {
        var loves = document.getElementsByName("love");
        for (var i = 0; i < loves.length; i++) {
            var love1 = loves[I];
            love1.checked = false;
        }
    }

    function selOther() {
        var loves = document.getElementsByName("love");
        for (var i = 0; i < loves.length; i++) {
            var love1 = loves[I];
            if (love1.checked == true) love1.checked = false;
            else if (love1.checked == false) love1.checked = true;
        }
    }

    function selAllNo() {
        var box1 = document.getElementById("boxid");
        if(box1.checked == true){
            selAll();
        }
        else{
            selNo();
        }
    }

</script>
</body>
</html>

image.png