dongyu1918
2018-07-19 09:04 浏览 40

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

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');

  });
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答 默认 最新

  • 已采纳
    dtxob80644 dtxob80644 2018-07-19 10:06
      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>
    
    点赞 评论 复制链接分享

相关推荐