JS复选框实现全选，反选

  • 通过dom对象的getElementByName()函数来获取相同名称的对象
  • 通过dom对象的getElementById()函数来获取需要操作的复选框对象

效果如图：

代码如下：

<!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>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <input type="checkbox" name="" id="balls" onclick="selAll()" /> 球类
    <br />
    <input type="checkbox" name="ball" id="" onclick="selectChe(0)" /> 篮球
    <br />
    <input type="checkbox" name="ball" id="" onclick="selectChe(1)" /> 足球
    <br />
    <input type="checkbox" name="ball" id="" onclick="selectChe(2)" /> 乒乓球
    <br />
    <input type="checkbox" name="ball" id="" onclick="selectChe(3)" /> 羽毛球
</body>

<script>
    //定义数组
    var arr = new Array()
    //初始化脚本，将数组值设置为false
    $(function() {
        var ball = document.getElementsByName('ball')
        for (let index = 0; index < ball.length; index++) {
            arr[index] = false
        }
    })
	//全选和全不选
    function selAll() {
        var balls = document.getElementById('balls').checked
        var ball = document.getElementsByName('ball')
        if (balls) {
            for (var i = 0; i < ball.length; i++) {
                ball[i].checked = true
            }
            for (var i = 0; i < ball.length; i++) {
                arr[i] = true
            }
        } else {
            for (var i = 0; i < ball.length; i++) {
                ball[i].checked = false
            }
            for (var i = 0; i < ball.length; i++) {
                arr[i] = false
            }
        }
    }
	//勾选单个
    function selectChe(res) {
        var ball = document.getElementsByName('ball')[res]
        if (ball.checked) {
            arr[res] = true
        } else {
            arr[res] = false
        }

        var count = 0
        for (let index = 0; index < arr.length; index++) {
            if (arr[index]) {
                count++
            }
        }

        if (count == arr.length) {
            document.getElementById('balls').checked = true
        } else {
            document.getElementById('balls').checked = false
        }
    }
</script>

</html>
posted @ 2022-04-26 16:27  神佑我阿羡  阅读(491)  评论(0)    收藏  举报