实现复选框的操作全选全不选反选

最新推荐文章于 2022-12-13 22:34:38 发布

weixin_46126761

最新推荐文章于 2022-12-13 22:34:38 发布

阅读量147

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46126761/article/details/106521104

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>你的爱好是什么</h2>
    <input type="checkbox" id="checkAll">全选/全不选<br>
    <input type="checkbox" name="hobby">写代码
    <input type="checkbox" name="hobby">写bug
    <input type="checkbox" name="hobby">改bug
    <input type="checkbox" name="hobby">当产品经理
    <input type="checkbox" name="hobby">变秃
    <input type="checkbox" name="hobby">没有变强<br>

    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>


</body>

</html>
<script>
    var firstInput = document.querySelector('#checkAll');
    var oHobby = document.getElementsByName('hobby');
    var btnAll = document.getElementsByTagName('button')[0];
    var btnNo = document.getElementsByTagName('button')[1];
    var btnFan = document.getElementsByTagName('button')[2];
    firstInput.onclick = function () {//全选
        for (var i = 0; i < oHobby.length; i++) {
            oHobby[i].checked = firstInput.checked;
        }
    }
    btnAll.onclick = function () {
        for (var i = 0; i < oHobby.length; i++) {
            oHobby[i].checked = true;
        }
    }
    btnNo.onclick = function () {
        for (var i = 0; i < oHobby.length; i++) {
            oHobby[i].checked = false;
        }
    }
    btnFan.onclick = function () {
        for (var i = 0; i < oHobby.length; i++) {
            oHobby[i].checked = !oHobby[i].checked;
        }
    }
</script>