我无法访问表单中的一系列输入字段,因为它是由插件动态创建的。代码如下所示:
<!-- 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");
});
问题是,一旦我在第二部分选择了一个元素,在第一部分选中的元素就会取消选中,反之亦然。
最佳答案
遍历所有复选框并在每次更改时设置适当的类等
var boxes = $('.wccf_product_radio').on('change', function() {
boxes.filter(':checked')
.closest('li')
.addClass('checked')
.siblings('li')
.removeClass('checked');
});
关于javascript - 如何使用 JS 将类添加到所选单选按钮的父级 <li>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39859698/