欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用JavaScript(js)实现复选框效果(全选、全不选、反选)!

程序员文章站 2022-03-20 23:26:03
复选框js全选、反选、全不选...

用JavaScript(js)实现复选框效果(全选、全不选、反选)!

话不多说,先上效果图:
用JavaScript(js)实现复选框效果(全选、全不选、反选)!
HTML代码:

<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代码:

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;
    }
}

本文地址:https://blog.csdn.net/qq_43923146/article/details/107496722