复选框的全选反选实现 

<!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(){

});

 

posted @ 2017-08-02 10:10  淡紫色鍀薰衣草  阅读(161)  评论(0)  编辑  收藏  举报