父子复选框选择

Question

<input type="checkbox" name="all[]" id="<?php echo $record_id;?>" value="<?php echo $record_id; ?>" onclick="childChecked(this, this.form.elements['prnt'])"> 

上述代码通过从数据库中获取数据

<input type="checkbox" name="all[]" id="<?php echo $record_id;?>" value="<?php echo $record_id; ?>" onclick="allChecked(this, this.form.elements['prnt'])"> 

创建用于每一行动态子复选框和以上是父复选框

JavaScript代码：

function checkAll(){ 
     var main_check=document.getElementById("check"); 
     var all_check=document.getElementsByName('all[]'); 
     if(main_check.checked){ 
      for(var i=0;i<all_check.length;i++){ 
       all_check[i].checked=true; 
      } 
     }else{ 
      for(var i=0;i<all_check.length;i++){ 
       all_check[i].checked=false; 
      } 
     } 
    } 
function childChecked(child, prnt){ 
    if (!child.length){ // if not an array 
     prnt.checked = child.checked; 
     //alert(prnt.checked); 
     return; 
    } 
    for (var i=0; i<child.length; i++){ 
     if (!child[i].checked) 
    return; 
} 
prnt.checked = true; 
} 

上面的

是我父母孩子复选框选择的代码 它的作用是： 个1.检查/检验上取消选中复选框儿童/取消选中复选框母公司2. 取消选中复选框家长，如果孩子复选框中的一个没有被选中

，现在我的问题是，它会检查父复选框，如果我们选中一个孩子，但复选框我想检查父复选框，当且仅当所有子复选框被选中

Answer 1

你的代码可以简化为：

var main_check = document.getElementById("check"); 
var all_check = document.getElementsByName('all[]'); 

main_check.onchange = checkAll; 

for (var i = 0; i < all_check.length; i++) { 
    all_check[i].onchange = childChanged; 
} 

function checkAll() { 
    for (var i = 0; i < all_check.length; i++) { 
     all_check[i].checked = main_check.checked; 
    } 
} 

function childChanged() { 
    if (!this.checked) { 
     main_check.checked = false; 
     return; 
    } 

    // Check if main checkbox should be checked 
    for (var i = 0; i < all_check.length; i++) { 
     if (!all_check[i].checked) return; 
    } 

    main_check.checked = true; 
} 

和HTML：

<input type="checkbox" id="check" /> Main 

<ul> 
    <li><input type="checkbox" name="all[]" /></li> 
    <li><input type="checkbox" name="all[]" /></li> 
    <li><input type="checkbox" name="all[]" /></li> 
    <li><input type="checkbox" name="all[]" /></li> 
</ul> 

我也摆脱了内联事件处理程序。

演示：http://jsfiddle.net/TXRNF/