javascript - 如何使用 JS 将类添加到所选单选按钮的父级

Question

我无法访问表单中的一系列输入字段，因为它是由插件动态创建的。代码如下所示:

<!-- section 1 -->
<div>
    <ul>
        <li>
            <input type="radio" name="wccf[product][people]" id="wccf_product_people_one" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
        </li>
        <li>
            <input type="radio" name="wccf[product][people]" id="wccf_product_people_twp" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
        </li>
        <li>
            <input type="radio" name="wccf[product][people]" id="wccf_product_people_three" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
        </li>
    </ul>
</div>

<!-- section 2 -->
<div>
    <ul>
        <li>
            <input type="radio" name="wccf[product][budget]" id="wccf_product_budget_one" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
        </li>
        <li>
            <input type="radio" name="wccf[product][budget]" id="wccf_product_budgete_twp" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
        </li>
        <li>
            <input type="radio" name="wccf[product][budget]" id="wccf_product_budget_three" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
        </li>
    </ul>
</div>

我想将 .checked 类添加到 <li>包含选中单选按钮的元素。

到目前为止，这是我最接近让它工作的时间:

// Radio buttons for PEOPLE
$('input[name="wccf[product][people]"]').on('click', function() {
    $(".checked").removeClass("checked");
    $(this).parent().toggleClass("checked");
});

// Radio buttons for BUDGET
$('input[name="wccf[product][budget]"]').on('click', function() {
    $(".checked").removeClass("checked");
    $(this).parent().toggleClass("checked");
});

问题是，一旦我在第二部分选择了一个元素，在第一部分选中的元素就会取消选中，反之亦然。

Answer 1

遍历所有复选框并在每次更改时设置适当的类等

var boxes = $('.wccf_product_radio').on('change', function() {
    boxes.filter(':checked')
         .closest('li')
         .addClass('checked')
         .siblings('li')
         .removeClass('checked');
});