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" 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 时，所有子复选框都应该被选中/取消选中（切换）

4

1 回答 1

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 片段一致时，第二种方法才有效，即 a 旁边的父复选框<ul>包含子复选框。

于 2013-06-25T14:40:02.243 回答