如何在jquery中取消选中嵌套的复选框并保留当前单击的复选框

Question

我在WordPress中用ul和li包装了嵌套的复选框。html写在下面。

<ul class="woof_list woof_list_checkbox">
<li>
<label class="woof_checkbox_label " for="woof_uncheck">Parent Category 1</label>
<ul class="woof_childs_list">
<li class="woof_childs_list_li">
<label class="woof_checkbox_label " for="woof_uncheck">Sub Category 1</label>
<ul class="woof_childs_list">
<li>
<input type="checkbox"  class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="654" value="654">
<label class="woof_checkbox_label " for="">Product 1</label>
</li>
<li>
<input type="checkbox"  class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="644" value="644">
<label class="woof_checkbox_label " for="">Product 2</label>
</li>
</ul>
</li>
<li class="woof_childs_list_li">
<label class="woof_checkbox_label " for="woof_uncheck">Sub Category 2</label>
<ul class="woof_childs_list">
<li>
<input type="checkbox"  class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="541" value="541">
<label class="woof_checkbox_label " for="">Product 3</label>
</li>
<li>
<input type="checkbox"  class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="542" value="542">
<label class="woof_checkbox_label " for="">Product 4</label>
</li>
</ul>
</li>

</ul>
</li>
</ul>

• 父类别1
  • 子类别1
    • [checkbox]产品1
    • [复选框]产品2
  • 子类别2
    • [checkbox]产品3
    • [复选框]产品4

上面html的默认实现是，当我点击任何产品标签时，它旁边的复选框都会被选中

你知道当我单击产品标签但仍然选中单击的标签时，如何取消选中所有复选框吗？

例如："产品4"复选框是当前选中的，当我单击"产品1"的标签时，我想取消选中"产品4》复选框，但"产品"复选框现在将被选中。

你知道怎么做吗？感谢

我当前的jquery代码是：

$('.woof_list woof_list_checkbox > li > .woof_childs_list > .woof_childs_list_li > .woof_childs_list > li > woof_checkbox_label ').click(function(){
$('.woof_checkbox_term').prop('checked', false);
$(this).find('.woof_checkbox_term').trigger('click');
});

Answer 1

Try this **JQUERY** Code

$(function(){
$('.woof_checkbox_term').on('click',function(e){
$('.woof_checkbox_term').prop('checked', false);
$(e.target).prop('checked',true);
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="woof_list woof_list_checkbox">
<li>
<label class="woof_checkbox_label " for="woof_uncheck">Parent Category 1</label>
<ul class="woof_childs_list">
<li class="woof_childs_list_li">
<label class="woof_checkbox_label " for="woof_uncheck">Sub Category 1</label>
<ul class="woof_childs_list">
<li>
<input type="checkbox" id="p1" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="654" value="654">
<label class="woof_checkbox_label " for="p1">Product 1</label>
</li>
<li>
<input type="checkbox" id="p2" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="644" value="644">
<label class="woof_checkbox_label " for="p2">Product 2</label>
</li>
</ul>
</li>
<li class="woof_childs_list_li">
<label class="woof_checkbox_label " for="woof_uncheck">Sub Category 2</label>
<ul class="woof_childs_list">
<li>
<input type="checkbox" id="p3" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="541" value="541">
<label class="woof_checkbox_label " for="p3">Product 3</label>
</li>
<li>
<input type="checkbox" id="p4" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="542" value="542">
<label class="woof_checkbox_label " for="p4">Product 4</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>