在 jquery 中通过父复选框选中子复选框

Question

我正在尝试通过 Jquery 中的父复选框检查子复选框。但是代码第一次正常工作，然后它停止工作

$(document).ready(function () {
    $("#append").delegate("#p0", "click", function () {
        if (this.checked == true) {
            $("#submenu0 input").attr('checked', true);
        } else {
            $("#submenu0 input").attr('checked', false);
        }
    });

HTML

<div id="append" name="append" style="background-color: white;">
    <input type="checkbox" id="p0" value="Administrative Boundary">
    <div id="submenu0" class="a" style=" margin-left: 29px ">
        <input type="checkbox" id="pc00" value="KBJNL:district_boundary_2011" checked="checked">District Boundary 2011
        <br>
    </div>
</div>

Answer 1

在 jquery 中使用 on 进行事件委托，并使用 prop() 代替 attr()

$(document).ready(function () {
    $("#append").on("change","#p0", function() {
        $("#submenu0 input").prop('checked', this.checked);
    });
});

DEMO

Answer 2

您可以使用已单击复选框的 checked 状态来更新其他复选框。

查看内联评论。

// Use change event, and on to bind events, delegate calls on inside
$("#append").on("change", "#p0", function() {
    $("#submenu0 :checkbox").prop('checked', $(this).is(':checked'));
    // if this checkbox is checked then check all the checkboxes inside #submenu0
});

在 jquery 中通过父复选框选中子复选框

check child check box by parent check box in jquery

html

javascript

jquery

event-handling