JavaScript表单checkbox实现全选，全不选和反选操作

最新推荐文章于 2023-07-07 13:52:03 发布

趁早回家卖红薯

最新推荐文章于 2023-07-07 13:52:03 发布

阅读量171

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/zzhouyu/article/details/123100388

版权

初学js，有不完善的地方，欢迎前辈指点

<!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>
    <from>
        <input type="checkbox" name="" id="hobby">唱歌
        <input type="checkbox" name="" id="hobby">跳舞
        <input type="checkbox" name="" id="hobby">说唱
        <input type="checkbox" name="" id="hobby">篮球
        <input type="button" value="全选" id="qx-btn">
        <input type="button" value="反选" id="fx-btn">
    </from>
    <script>
        // 先获取需要用到的多选按钮
        hobby = document.querySelectorAll('#hobby');
        // 按钮绑定事件
        document.querySelector('#qx-btn').onclick = function(){
            for(var i = 0;i <= hobby.length;i++){
                if(hobby[i].checked == false){
                    hobby[i].checked = true;
                    document.querySelector('#qx-btn').value = '全不选';
                   }else if(document.querySelector('#qx-btn').value == '全不选'){
                       for(var i = 0;i <= hobby.length;i++){
                       hobby[i].checked = false;
                       document.querySelector('#qx-btn').value = '全选';
                       }
                       }else{
                          return false;
                }  
            }
        }
        document.querySelector('#fx-btn').onclick = function(){
            for(var i = 0;i <= hobby.length;i++){
                if(hobby[i].checked == true){
                    hobby[i].checked = false;
                }else{
                    hobby[i].checked = true;
                }
            }
        }
    </script>
</body>
</html>