当单击同一 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);
});
最佳答案
您可以像这样更改 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);
});
关于javascript - 单击链接时如何选中和取消选中复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34586508/