复选框的全选和反选

实现全选与反选功能的复选框操作

最新推荐文章于 2023-03-04 22:45:49 发布

原创最新推荐文章于 2023-03-04 22:45:49 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

15 篇文章

订阅专栏

这段HTML代码展示了如何使用JavaScript实现复选框的全选和反选功能。当用户点击全选按钮时，所有复选框会被选中；点击反选按钮时，所有复选框的选中状态将反转。每个复选框点击事件会检查是否所有选项都被选中，从而更新全选按钮的选中状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box" id="box">
    <p><input type="checkbox">选项一</p>
    <p><input type="checkbox">选项二</p>
    <p><input type="checkbox">选项三</p>
    <p><input type="checkbox">选项四</p>
    <p><input type="checkbox">选项五</p>
    <p><input type="checkbox">选项六</p>
    <p><input type="checkbox">选项七</p>
</div>
全选<input type="checkbox" value="全选" id="btn1">
反选<input type="checkbox" value="反选" id="btn2">
<script>
    var oBox = document.getElementById('box');
    var inputs = oBox.getElementsByTagName('input');
//    自动选中，取消选中
    for (var i = 0; i < inputs.length; i++) {
//        每个复选按钮的点击事件
        inputs[i].onclick=function () {
            for(var i=0;i<inputs.length;i++){
                if(!inputs[i].checked){
//                    如果有一个不符合条件，终止循环
                    document.getElementById('btn1').checked=false;
                    break;
                }
                else{
                    if(i==inputs.length-1){
                        document.getElementById('btn1').checked=true;
                    }
                }
            }
        }
    }
//    全选按钮
    document.getElementById('btn1').onclick=function () {
        if(this.checked){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=true;
            }
        }
        else{
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=false;
            }
        }
    }
//    反选按钮
    document.getElementById('btn2').onclick=function () {
        for(var i=0;i<inputs.length;i++){
            if(inputs[i].checked){
                inputs[i].checked=false;
            }
            else{
                inputs[i].checked=true;
            }
        }
    }

</script>
</body>
</html>