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

Question

I have nested checkboxes wrapped in a ul and li in WordPress. The html is written below.

<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>

• Parent Category 1
  • Sub Category 1
    • [checkbox] Product 1
    • [checkbox] Product 2
  • Sub Category 2
    • [checkbox] Product 3
    • [checkbox] Product 4

The default implementation of the html above is when I click any of the product labels, the checkbox beside it will be checked

Do you know how can I uncheck all of the checkboxes when I click a Product label but still check the clicked label?

For example: Product 4 checkbox is currently checked and when I click the label for Product 1, I want to uncheck Product 4 checkbox but Product checkbox will now be checked.

Do you have any idea how to do this? Thanks

My current jquery code is:

  $('.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>

</div>