用js实现点击一个复选框其它复选框也会被选中

内容描述:实现点击一个复选框其它复选框也全部选中,取消一个复选框其它也全部取消。

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现全选</title>
    <script>
        //window.onload里面的函数会在页面加载之后执行
        window.onload = function () {
            var input0 = document.getElementById('input0');
            var oDiv = document.getElementById('div1');
            var oInput = oDiv.getElementsByTagName('input');
            input0.onclick = function () {
                if (input0.checked) {
                    for (var i = 0; i < oInput.length; i++) {
                        oInput[i].checked = true;
                    }

                } else {
                    for (var i = 0; i < oInput.length; i++) {
                        oInput[i].checked = false;
                    }
                }
            }

        };
    </script>
</head>
<body>
<input type="checkbox" id="input0"><br><br>
<div id="div1">
    <input type="checkbox" id="input1"><br>
    <input type="checkbox" id="input2"><br>
    <input type="checkbox" id="input3"><br>
    <input type="checkbox" id="input4"><br>
    <input type="checkbox" id="input5"><br>
</div>
</body>
</html>

代码说明:

window.onload表示里面的函数会在页面加载之后执行 

用onclick属性对checkbox的当前状态进行实时更新

效果图:

初始图:

点击第一个复选框:

再次点击:

 

猜你喜欢

转载自blog.csdn.net/psjasf1314/article/details/124122507