JS&jQuery全选反选父项子项联动多选框

最新推荐文章于 2022-11-24 16:12:11 发布

weixin_30510153

最新推荐文章于 2022-11-24 16:12:11 发布

阅读量110

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangyu00/p/6686699.html

版权

全选反选父项子项联动多选框

js代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选</title>
</head>
<body>
<input type="checkbox" id="btn1">全选
<div id="div1">
    <input type="checkbox" name="id">
    <input type="checkbox" name="id">
    <input type="checkbox" name="id">
</div>
<script>
    var oBtn1=document.getElementById('btn1');
    var aDiv=document.getElementById('div1');
    var aCheck = document.getElementsByName("id");
    oBtn1.οnclick=function(){
        for(var i=0; i<aCheck.length; i++){
            if(oBtn1.checked==true){
                aCheck[i].checked=true;
            }
            else{
                aCheck[i].checked=false;
            }
        }

    };
    for(var i=0; i<aCheck.length; i++){
        var n=0;
        aCheck[i].οnclick=function(){
            if(this.checked){
                n+=1;//获取被选中的input元素长度
            }else{
                n-=1;
            }
            if(n==aCheck.length){
                oBtn1.checked = true;
            }else{
                oBtn1.checked = false;
            }
        }
    }
</script>

</body>

</html>


jQuery代码：

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
    $(function(){
        $('#btn1').click(function(ev){
            $('INPUT[name=id]').attr('checked',$('#btn1').prop('checked'));
        });
        $('INPUT[name=id]').click(function(ev){
            $('#btn1').attr('checked',
                    $('INPUT[name=id]:checked').length == $('INPUT[name=id]').length);
        });
    });
</script>

转载于:https://www.cnblogs.com/zhangyu00/p/6686699.html

weixin_30510153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS&jQuery全选反选父项子项联动多选框

全选反选父项子项联动多选框js代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选</title></head><body><input type="checkbox" id="btn1"&g...
复制链接

扫一扫