如何使用JS将类添加到所选单选按钮的父<li>

Question

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

Tasks

我想将.checked类添加到包含已检查单选按钮的<!-- 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> 元素。

到目前为止，这是我最接近它的工作方式：

<li>

问题是，当我在第二部分选择一个元素时，第一部分上检查的元素将被取消选中，反之亦然。

Answer 1

迭代所有复选框并在每次更改等上设置适当的类

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

Answer 2

问题在于选择器$('.checked')。此选择器未绑定到特定ul的内容。相反，它遍历整个类的DOM，删除它，然后在当前父级上设置它。尝试改变你的代码：

$('input[name="wccf[product][people]"], input[name="wccf[product][budget]"]').on('click', function() {
    $(this).parent()
        .siblings('.checked')
        .removeClass('checked')
        .end()
        .addClass('checked');
});

您还应注意<input />元素是自动关闭的，不需要结束标记 </input> 。