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

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

1 个答案: