Question

我有这种类型的嵌套复选框：

<ul id="location-stuff">

 <li>
    <ul>
        <a class="parent_taxe_loc" rel="taxe_project_cat_48" style="cursor:pointer;">…</a>
        Argentina<input class="parent_input_taxe_loc" type="checkbox" value="48" name="loc_term"></input>
        <li id="taxe_project_cat_48" class="" style="">
            <a class="parent_city" rel="city_project_cat_450" href="#"> … </a>Buenos Aires<input type="checkbox" value="450" name="loc_term"></input>
            <ul id="city_project_cat_450" class="baca_loc" style="">
                <li>25 De Mayo <input type="checkbox" value="451" name="loc_term"></input>
                </li>
             ...
             ...
             </ul>
        </li>
     </ul></li></ul>

我希望在检查父级时，必须将所有子项标记为已选中。所以我把这个脚本jquery放在页面上

$('input[class="parent_input_taxe_loc"]').each (function () {
                $(this).bind('click change', function (){
                    if($(this).is(':checked')) {
                            $(this).siblings('ul').find('input[type="checkbox"]').attr('checked', 'checked');
                            $(this).parents('ul').siblings('input[type="checkbox"]').attr('checked', 'checked');
                    } else {
                            $(this).siblings('ul').find('input[type="checkbox"]').removeAttr('checked', 'checked');
                    }
                });
            });

但由于某种原因不起作用。路径input[class="parent_input_taxe_loc"]似乎是正确的。我做错了什么？

Answer 1

您可以使用以下内容：

＆＃13;

$('input[class="parent_input_taxe_loc"]').on("click", function () {
    $(this).parent().find("input:checkbox").prop("checked", $(this).prop("checked"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="location-stuff">
    <li>
        <ul> <a class="parent_taxe_loc" rel="taxe_project_cat_48" style="cursor:pointer;">…</a>
Argentina
            <input class="parent_input_taxe_loc" type="checkbox" value="48" name="loc_term"></input>
            <li id="taxe_project_cat_48" class="" style=""> <a class="parent_city" rel="city_project_cat_450" href="#"> … </a>Buenos Aires
                <input type="checkbox" value="450" name="loc_term"></input>
                <ul id="city_project_cat_450" class="baca_loc" style="">
                    <li>25 De Mayo
                        <input type="checkbox" value="451" name="loc_term"></input>
                    </li>... ...</ul>
            </li>
        </ul>
    </li>
</ul>

＆＃13;

您可以为嵌套城市等工作方式。

Answer 2

＆＃13;

//if this is the solution you were looking for kindly mark this answer as correct :)
$('input[type="checkbox"]').click(function(){
  $(this).closest('ul').children().find('input[type="checkbox"]').prop('checked', this.checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="location-stuff">
 <li>
    <ul>
        <a class="parent_taxe_loc" rel="taxe_project_cat_48" style="cursor:pointer;">…</a>
        Argentina<input class="parent_input_taxe_loc" type="checkbox" value="48" name="loc_term"></input>
        <li id="taxe_project_cat_48" class="" style="">
            <a class="parent_city" rel="city_project_cat_450" href="#"> … </a>Buenos Aires<input type="checkbox" value="450" name="loc_term"></input>
            <ul id="city_project_cat_450" class="baca_loc" style="">
                <li>25 De Mayo <input type="checkbox" value="451" name="loc_term"></input>
                </li>
             ...
             ...
             </ul>
        </li>
     </ul></li></ul>

＆＃13;

在嵌套复选框中将所有子项标记为已选中

2 个答案: