检查/取消选中所有子复选框应在递归树中切换（选中/取消选中）答案

【问题标题】：on check/Uncheck all the child checkboxes should be toggled(checked/unchecked) in recurssive Tree检查/取消选中所有子复选框应在递归树中切换（选中/取消选中）
【发布时间】：2013-06-25 12:54:30
【问题描述】：

我正在尝试为复选框实现切换，这里当我选中/取消选中时，所有子复选框都应该被取消选中/取消选中，我试图在下面的递归树中添加的这个功能是树 html sn-p 的一部分

<strong id="img_18" class="cat_minus" onclick="getchildcategories();"></strong>
<input id="checkbox_18" type="checkbox" onclick="getchildcategories();" value="">
Apparel
<ul>
    <li>
        <strong class="space_filler"></strong> 
        <input id="checkbox_4" type="checkbox" name="product_filter[ProductId][]" onclick="getchildcategories();">
        Shirts
    </li>
    <li id="category_5">
        <strong id="img_5" class="cat_plus" onclick="getchildcategories();"></strong>
        <input id="checkbox_5" type="checkbox" name="product_filter[ProductId][]" onclick="getchildcategories();">
        Shoes
    </li>
    <li>
        <strong class="space_filler"></strong> 
        <input id="checkbox_19" type="checkbox" name="product_filter[ProductId][]" onclick="getchildcategories();"> 
        Hoodies
    </li>
</ul>

在上面的 html 中，我正在尝试当我检查 id checkbox_18 的 chechbox 时，所有子复选框都应该被选中/取消选中（切换）

【问题讨论】：

标签： prototypejs prototype

【解决方案1】：

使用您的 HTML

<strong id="img_18" class="cat_minus" onclick="getchildcategories();"></strong>
<input id="checkbox_18" type="checkbox" onclick="getchildcategories();" value="">
Apparel
<ul>
    <li>
        <strong class="space_filler"></strong> 
        <input id="checkbox_4" class="childof_18" type="checkbox" name="product_filter[ProductId][]" onclick="getchildcategories();">
        Shirts
    </li>
    <li id="category_5">
        <strong id="img_5" class="cat_plus" onclick="getchildcategories();"></strong>
        <input id="checkbox_5" class="childof_18" type="checkbox" name="product_filter[ProductId][]" onclick="getchildcategories();">
        Shoes
    </li>
    <li>
        <strong class="space_filler"></strong> 
        <input id="checkbox_19" class="childof_18" type="checkbox" name="product_filter[ProductId][]" onclick="getchildcategories();"> 
        Hoodies
    </li>
</ul>

如果您可以像上面那样向子复选框添加一个类，那么您可以在任何观察者处理程序中轻松控制它们。例如

$('checkbox_18').observe('click',function(){
    //this is the element the event happened on
    //in this case the element with id checkbox_18
    if(this.checked)
    {
        $$('.childof_18').invoke('writeAttribute','checked','checked');
    }
    else
    {
        $$('.childof_18').invoke('writeAttribute','checked',null);
    }
});

如果您无法将类添加到子复选框 - 但您知道 DOM 结构将保持一致，您可以使用 DOM 遍历方法到达那里。我就是这样做的。

$('checkbox_18').observe('click',function(){
    if(this.checked)
    {
        this.next('ul').select('input[type="checkbox"]').invoke('writeAttribute','checked','checked');
    }
    else
    {
        this.next('ul').select('input[type="checkbox"]').invoke('writeAttribute','checked',null);
    }
});

警告：仅当您的结构与您提供的 HTML sn-p 一致时，第二种方法才有效，即 <ul> 旁边的父复选框包含子复选框。

【讨论】：