复选框的全选和反选

<!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>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页