JS实现全选、全不选、反选

鹿路露璐

于 2022-10-31 20:05:16 发布

阅读量202

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/csdnid_0001/article/details/127622354

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>请选择你的爱好：</p>
    <label>
        <input type="checkbox" id="all">全选/全不选
    </label>
    <br><br>
    <label>
        <input type="checkbox" name="choose" />打篮球
    </label>
    <label>
        <input type="checkbox" name="choose" />踢足球
    </label>
    <label>
        <input type="checkbox" name="choose" />上网
    </label>
    <label>
        <input type="checkbox" name="choose" />写代码
    </label>
    <label>
        <input type="checkbox" name="choose" />写文档
    </label>
    <label>
        <input type="checkbox" name="choose" />查bug
    </label>
    <br><br>
    <input type="button" value="全选" id="btn_all">

    <input type="button" value="全不选" id="no_all">

    <input type="button" value="反选" id="fanxuan">

    <script>
        //全选
        function choose() {
            let temp = document.getElementsByName('choose');
            for (let i = 0; i < temp.length; i++) {
                temp[i].checked = true;
            }
        }

        //全不选
        function nochoose() {
            let temp = document.getElementsByName('choose');
            for (let i = 0; i < temp.length; i++) {
                temp[i].checked = false;
            }
        }

        //checkbox的全选/全不选
        var inp_btn = document.getElementById('all');
        inp_btn.addEventListener('change', function(){
            if(this.checked){
                choose();
            }else{
                nochoose();
            }
        });
        
        //按钮全选
        var all_btn = document.getElementById('btn_all');
        all_btn.addEventListener('click', choose);
        
        //按钮全不选
        var no_btn = document.getElementById('no_all');
        no_btn.addEventListener('click', nochoose);
        
        //按钮反选
        var fanxuan_btn = document.getElementById('fanxuan');
        fanxuan_btn.addEventListener('click', fanxuan);
        function fanxuan() {
            let temp = document.getElementsByName('choose');
            for (let i = 0; i < temp.length; i++) {
                temp[i].checked = !temp[i].checked;
            }
        }

    </script>
</body>

</html>