Use JavaScript (js) to achieve the checkbox effect (select all, unselect all, and inverse selection)!

Use JavaScript (js) to achieve the checkbox effect (select all, unselect all, and inverse selection)!

Not much to say, let's first show the renderings:

HTML code:

<p>请选择你的爱好</p>
<input type="checkbox" id="orallchoose">全选/全不选
<br>
<input type="checkbox"  class="hobby">打篮球
<input type="checkbox"  class="hobby">踢足球
<input type="checkbox"  class="hobby">敲代码
<input type="checkbox"  class="hobby">唱歌
<input type="checkbox"  class="hobby">跳舞
<br>
<input type="button" id="allchoose" value="全选">
<input type="button" id="nochoose" value="全不选">
<input type="button"  id="Fchoose" value="反选">

JavaScript code:

let orallchoose = document.getElementById("orallchoose");
let allchoose = document.getElementById("allchoose");
let nochoose = document.getElementById("nochoose");
let hobby = document.getElementsByClassName("hobby");
let Fchoose = document.getElementById("Fchoose");
let check = true;   

allchoose.onclick = function(check){ //全选按钮事件
    for(let i=0;i<hobby.length;i++){
        hobby[i].checked = check;   
    }
}
nochoose.onclick = function(){ //全不选按钮事件
    check = false;
    for(let i=0;i<hobby.length;i++){
        hobby[i].checked = check;
    }
    orallchoose.checked = check;
    check = true;
}
orallchoose.onclick = function(){ //全选或全不选按钮事件
    if(check){
        for(let i=0;i<hobby.length;i++){
            hobby[i].checked = check;
        }
        check=false;
    }else{
        for(let i=0;i<hobby.length;i++){
            hobby[i].checked = check;  
        } 
        check=true;      
    }
}
Fchoose.onclick = function(){ //反选按钮事件
    for(let i=0;i<hobby.length;i++){
        hobby[i].checked = !hobby[i].checked;
    }
}