javascript - 单击链接时如何选中和取消选中复选框？

Question

当单击同一 div 内的链接时，我必须选中和取消选中某个 div 内的复选框。我必须拥有相同类型的代码，但是我也需要脚本能够完美运行。我必须将复选框放在子项中，并且按钮也应该是子项。 HTML 代码如下。

<div class="parent">

<div class="child">

    <a class="filter-check-btn">button</a>

    <div class="all-checkboxes">
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
    </div>

</div>

<div class="child">

    <div class="all-checkboxes">
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
    </div>

</div>
</div>

脚本如下

$(".filter-check-btn").on('click', function() {
    $(this).toggleClass('active');
    $(this).parent().parent().children(".filter-chk-box").prop('checked', false);
});

$(".filter-check-btn.active").on('click', function() {
    $(this).toggleClass('active');
    $(this).parent().parent().children(".filter-chk-box").prop('checked', true);
});

Answer 1

您可以像这样更改 jQuery 代码:

$(".filter-check-btn").on('click', function() {
    $(this).toggleClass('active');
    if ($(this).hasClass("active"))
    $(this).parent().parent().find(".filter-chk-box").prop('checked', true);
    else
    $(this).parent().parent().find(".filter-chk-box").prop('checked', false);
});

FIDDLE