我有在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>

10-07 19:27
查看更多