zoukankan html css js c++ java

复选框的全选反选实现

<!doctype html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>测试页面</title>  
        <script src = "jquery.js"></script>  
        <script src = "test.js"></script>  
    </head>  
    <body>  
        <input type = "checkbox" id = "allCheck"/>全选</th><br/>  
        <input type = "checkbox" name = "check"/></th>  
        <input type = "checkbox" name = "check"/></th>  
        <input type = "checkbox" name = "check"/></th>  
        <input type = "checkbox" name = "check"/></th>  
    </body>  
</html>

//全选框  
$("#allCheck").click(function(){  
    if($(this).attr("checked")){  
        $("input[name='check']").attr("checked",true);  
    }else{  
        $("input[name='check']").attr("checked",false);  
    }  
})  
//单选框  
$("input[name='check']").change(function(){  
    if($("input[name='check']").not("input:checked").size() <= 0){  
        $("#allCheck").attr("checked",true);  
    }else{  
        $("#allCheck").attr("checked",false);  
    }  
})

//全选框  
$("#allCheck").click(function(){  
    $("input[name='check']").prop("checked",this.checked);  
})  
//单选框  
$("input[name='check']").change(function(){  
    if($("input[name='check']").not("input:checked").size() <= 0){  
        $("#allCheck").prop("checked",true);  
    }else{  
        $("#allCheck").prop("checked",false);  
    }  
})

//全选框  
$("#allCheck").click(function(){  
    var a = document.getElementById("allCheck");  
    var b = document.getElementsByName("check");  
    if(a.checked){  
        for(var i = 0; i < b.length; i++){  
            b[i].checked = true;  
        }  
    }else{  
        for(var i = 0; i < b.length; i++){  
            b[i].checked = false;  
        }  
    }  
})  
//单选框  
$("input[name='check']").click(function(){  
    var flag = true;  
    var a = document.getElementById("allCheck");  
    var b = document.getElementsByName("check");  
    for(var i = 0; i < b.length; i++){  
        if(!b[i].checked){  
            flag = false;  
            break;  
        }  
    }  
    a.checked = flag;  
});

如果不行，用on代理

$(document).on('click',"input[name='subChk']",function(){

});

查看全文

相关阅读:
华为Mate8 NFC 时好时坏，怎么解决呢？
linux下使用FreeRDP 连接 Windows 远程桌面
 Linux下如何查看系统启动时间和运行时间以及安装时间
 运维监控系统之Open-Falcon
gitlab之邮箱配置
 Ubuntu系统日志
 安装docker-compose的两种方式
 Linux用户配置sudo权限(visudo)
Centos7下部署两套python版本并存
 线上mongodb 数据库用户到期时间修改的操作记录

原文地址：https://www.cnblogs.com/zsy0712/p/7272402.html