Question

我在每个li标记上都有嵌套列表复选框，

我的问题是： 如果选中了父复选框，则还应检查其所有子复选框。

来自Fiddle的示例：如果我检查＆＃34;子食物＆＃34;然后还应检查子食品下的所有复选框，即X，Y，Z。如何使用jquery

执行此操作

 <div id="checboxlist">
  <ul> 
    <li id="taskrow_id1"><input type ="checkbox"> Sub food
        <ul> 
            <li id="taskrow_id4"><input type ="checkbox"> X</li>

            <li id="taskrow_id5"><input type ="checkbox">Y</li>
             <li id="taskrow_id6"><input type ="checkbox">Z</li>
         </ul>  
        </li>

    <li id="taskrow_id2"><input type ="checkbox">B</li>
    <li id="taskrow_id3"><input type ="checkbox">c</li>
 </ul>  
</div>

我试过这样但是什么都不做

$("#taskrow_id1").closest('ul').prop('checked', true);

Answer 1

我只是使用find()和prop()的组合来查找元素并调整其checked属性：

$("#taskrow_id1").click(function(){
    var checkboxes = $(this).find("input[type=checkbox]");
    checkboxes.prop("checked", checkboxes.prop("checked"));
});

jsFiddle here

但是，如果您要多次重复使用，请为元素添加class，只需使用ID选择器替换jQuery中的class选择器

jsFiddle example

Answer 2

您可以通过为子项复选框提供类名（例如＆＃39; foo＆＃39;）来简化此操作。

  $('#sub_food_check_box').click(function() {
        $('.foo').prop('checked', true);    
});

Answer 3

更新小提琴就在这里

Fiddle Here

首先，您可以将一些类添加到父li标签，然后添加jquery代码：

<div id="checboxlist">
<ul> 
    <li class="someClass"><input type ="checkbox"> Sub food
        <ul> 
            <li><input type ="checkbox"> X</li>

            <li><input type ="checkbox">Y</li>
             <li><input type ="checkbox">Z</li>
         </ul>  
        </li>

    <li><input type ="checkbox">B</li>
    <li><input type ="checkbox">c</li>
 </ul>    


</div>



$(document).ready(function(e) {
        $(".someClass").find("input").click(function(){
       $(".someClass").children().find("input").click();
    })
});

如果选中父复选框，则选中子复选框

3 个答案: