开发者社区> 问答> 正文

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

<!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>

展开
收起
a123456678 2016-07-11 15:19:56 1703 0
1 条回答
写回答
取消 提交回答
  • <!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>
    2019-07-17 19:54:14
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载