5
回答
大家帮我简化一下Js代码 (checkbox 选择)

大家帮我简化一下Js代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
.hidden {
    display: none !important;
}
#child{
	margin-bottom: 10px;
}
</style>
<script type="text/javascript">
	function ckAll0(){
		var cbs =child0.getElementsByTagName("input"); 
		var all0=document.getElementById("all0"); 
			for (i=0;i<cbs.length;i++){ 
			if(cbs[i].type=="checkbox"){ 
			cbs[i].checked = all0.checked;  
					} 
				} 
		}

	function ckAll1(){
		var cbs =child1.getElementsByTagName("input"); 
		var all1=document.getElementById("all1"); 
			for (i=0;i<cbs.length;i++){ 
			if(cbs[i].type=="checkbox"){ 
			cbs[i].checked = all1.checked;  
					} 
				} 
		}

	function ckAll2(){
		var cbs =child2.getElementsByTagName("input"); 
		var all2=document.getElementById("all2"); 
			for (i=0;i<cbs.length;i++){ 
			if(cbs[i].type=="checkbox"){ 
			cbs[i].checked = all2.checked;  
					} 
				} 
		} 	
</script> 
</head>
<body>

<label><input id="all0" type="checkbox" onclick="ckAll1()" />全选</label>
<div id="child0">
	<label><input type="checkbox" name="ulist[]" value="1" />A</label>
	<label><input type="checkbox" name="ulist[]" value="2" />B</label>
	<label><input type="checkbox" name="ulist[]" value="3" />C</label>
</div>

<label><input id="all1" type="checkbox" onclick="ckAll1()" />全选</label>
<div id="child1">
	<label><input type="checkbox" name="ulist[]" value="4" />A</label>
	<label><input type="checkbox" name="ulist[]" value="5" />B</label>
	<label><input type="checkbox" name="ulist[]" value="6" />C</label>
</div>

<label><input id="all2" type="checkbox" onclick="ckAll2()" />全选</label>
<div id="child2">
	<label><input type="checkbox" name="ulist[]" value="7" />A</label>
	<label><input type="checkbox" name="ulist[]" value="8" />B</label>
	<label><input type="checkbox" name="ulist[]" value="9" />C</label>
</div>

</body>
</html>



如果 checkbox 组多了的话,要写一大堆一样的代码,自己又不知道怎么简化,希望得到大家的帮助!

举报
qeyser
发帖于5年前 5回/244阅
共有5个答案 最后回答: 5年前
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
.hidden {
    display: none !important;
}
#child{
    margin-bottom: 10px;
}
</style>
<script type="text/javascript">
$(function(){
    $("#all0,#all1,#all2").click(function(){
        var isChecked = $(this).attr("checked");
        var checked =(isChecked=="checked"?isChecked:false);
        $("#"+$(this).attr("targetRow")).find("input[type='checkbox']").attr("checked",checked);
        
    });
});
</script>
</head>
<body>

<label><input id="all0" targetRow="child0" type="checkbox"/>全选</label>
<div id="child0">
    <label><input type="checkbox" name="ulist[]" value="1" />A</label>
    <label><input type="checkbox" name="ulist[]" value="2" />B</label>
    <label><input type="checkbox" name="ulist[]" value="3" />C</label>
</div>

<label><input id="all1" targetRow="child1" type="checkbox"/>全选</label>
<div id="child1">
    <label><input type="checkbox" name="ulist[]" value="4" />A</label>
    <label><input type="checkbox" name="ulist[]" value="5" />B</label>
    <label><input type="checkbox" name="ulist[]" value="6" />C</label>
</div>

<label><input id="all2" targetRow="child2" type="checkbox"/>全选</label>
<div id="child2">
    <label><input type="checkbox" name="ulist[]" value="7" />A</label>
    <label><input type="checkbox" name="ulist[]" value="8" />B</label>
    <label><input type="checkbox" name="ulist[]" value="9" />C</label>
</div>

</body>

</html>



看能否解决你的需求,不行的话再讨论下


--- 共有 2 条评论 ---
一笑居回复 @qeyser : 那就不用id选择器了 换成组合选择器或者样式选择器,多个组都用相同的class或者其他属性,你只要保证能准确定位到这个组就行。 5年前 回复
qeyser这个代码可以了,能不能 checkbox 组的数量不确定的情况下,让这个代码起作用? 也就是说 上面的只有 #all0,#all1,#all2 三个组, 如果是多个呢? 5年前 回复
$("#all0,#all1,#all2").on("click",function(){
var child = $(this).attr("child");
$("input[type=checkbox]","#"+child).attr("checked",this.checked);

});

这段应该可以解决你的问题。

不过前题是对你的每个全选的checkbox加一个属性child,其值为下面子选项的容器ID。

    $("#chkAll").click(function () {
         $("[name='chk']").prop('checked', this.checked);
     });
     
     $("[name='chk']").click(function(){
         if($("[name='chk']").length == $("[name='chk']:checked").length) {

             $("#chkAll").prop("checked", "checked");
         } else {
             $("#chkAll").removeAttr("checked");
         }
     });

    

要做到子项选中或非选中,全选状态要跟着变

就这段了

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> 
<style type="text/css">
.hidden {
    display: none !important;
}
#child{
	margin-bottom: 10px;
}
</style>
<script type="text/javascript">
$(function(){
	$(".mkGroup").change(function(){
		$(this).next("div").find("input[type=checkbox]").attr("checked",($(this).attr("checked")=="checked")?true:false);
		});
});
</script> 	
</head>
<body>
<input type="checkbox" class="mkGroup"/>全选
<div> 
    <label><input type="checkbox" name="ulist[]" value="1" />A</label> 
    <label><input type="checkbox" name="ulist[]" value="2" />B</label> 
    <label><input type="checkbox" name="ulist[]" value="3" />C</label> 
</div> 

<input type="checkbox" class="mkGroup"/>全选
<div> 
    <label><input type="checkbox" name="ulist[]" value="4" />A</label> 
    <label><input type="checkbox" name="ulist[]" value="5" />B</label> 
    <label><input type="checkbox" name="ulist[]" value="6" />C</label> 
</div> 

<input type="checkbox" class="mkGroup"/>全选
<div> 
    <label><input type="checkbox" name="ulist[]" value="7" />A</label> 
    <label><input type="checkbox" name="ulist[]" value="8" />B</label> 
    <label><input type="checkbox" name="ulist[]" value="9" />C</label> 
</div> 

</body>
</html>



顶部