我有在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
[复选框]产品1
[复选框]产品2
子类别2
[复选框]产品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');
});
最佳答案
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>