javascript文本全选，反选，多选

1.首先还是要创建一个案例文件

<div id="one">请选择爱好：
    <input type="checkbox" id="check">全选/全不选
    <br>
    <input type="checkbox" name="hobby">英语
    <input type="checkbox" name="hobby">登山
    <input type="checkbox" name="hobby">游泳
    <input type="checkbox" name="hobby">阅读
    <input type="checkbox" name="hobby">跑步
    <input type="checkbox" name="hobby">打球
    <div class="c1">
        <button class="b1" onclick="setall1()">全选</button>
        <button class="b1" onclick="setnoall()">全不选</button>
        <button class="b1" onclick="setfan()">反选</button>
        <button class="b1" onclick="take()">提交</button>

    </div>

 

 

 

 

 

 

 

 

 

 

 

 

 

2.先做全选

全选比较的简单，我们只要记住input checkbox的checked对象，并对它进行使用就行了

 var hobby=document.getElementsByName("hobby");
        var whole=document.getElementById("check");


//全选
        function setall1() {
            for(let i=0;i<hobby.length;i++){
                hobby[i].checked=true;
            }
            whole.checked=true;
        }

 

 

 

 

 

 

 

首先我们要获得爱好这个对象，因为前面有相同的name，所以要用

getElementsByName
全选其实很简单就是遍历我们这个对象的数组，然后进行checked，注意checked是boolean

3.在做全不选
全不选和全选是一样的思想，这里不做过多的描述
上代码

function setnoall() {
    for (let i=0;i<hobby.length;i++){
        hobby[i].checked=false;
    }
    whole.checked=false;
}

4.反选，
反选的思维其实很简单，就是我一旦选择了这个（就是true），那我就false它

function setfan() {
    for (let i=0;i<hobby.length;i++){
        if (hobby[i].checked==true){
            hobby[i].checked=false;
        }else if (hobby[i].checked==false){
            hobby[i].checked=true;
        }
        
}

5.input之全选和全不选
这里的

hobby[i].onclick=function () {
    whole.checked=true;
    for (let j=0;j<hobby.length;j++){
        if(hobby[j].checked==false){
            whole.checked=false;

            //一旦进入判断就得出结果,登山没有选择的话，循环就直接结束
            break;
        }

解释一下，我们点击的的时候，先把他们全部选中，在进入for循环进行遍历，如果
有一个没有选中，那就是直接返回false。

whole.onclick=function () {


    for (let i=0;i<hobby.length;i++) {
        if ( hobby[i].checked==false ) {
            hobby[i].checked = true;
        }else {
            hobby[i].checked=false;
        }
    }
}

//如果四个多选框全部选择，上面的whole也选中
for (let i=0;i<hobby.length;i++){


hobby[i].onclick=function () {
    whole.checked=true;
    for (let j=0;j<hobby.length;j++){
        if(hobby[j].checked==false){
            whole.checked=false;

            //一旦进入判断就得出结果,登山没有选择的话，循环就直接结束
            break;
        }
    }
}