php – 限制选中复选框(一次一个类别和一个子类别)

发布时间：2020-12-13 16:56:41 所属栏目：PHP教程来源：网络整理

导读：我的WordPress网站上有一个类别菜单列表,其代码如下所示： ul class="categorychecklist form-no-clear" data-wp-lists="list:product_cat" id="product_catchecklist" li id="product_cat-231"label class="selectit"input type="checkbox" id="in-product_

我的WordPress网站上有一个类别菜单列表,其代码如下所示：

<ul class="categorychecklist form-no-clear" data-wp-lists="list:product_cat" id="product_catchecklist">

    <li id="product_cat-231"><label class="selectit"><input type="checkbox" id="in-product_cat-231" name="tax_input[product_cat][]" value="231"> Balls and sport items</label></li>

    <li id="product_cat-204"><label class="selectit"><input type="checkbox" id="in-product_cat-204" name="tax_input[product_cat][]" value="204"> Beauty &amp; Health</label>
        <ul class="children">

            <li id="product_cat-274"><label class="selectit"><input type="checkbox" id="in-product_cat-274" name="tax_input[product_cat][]" value="274"> Beauty</label> 
                <ul class="children">

                    <li id="product_cat-205"><label class="selectit"><input type="checkbox" id="in-product_cat-205" name="tax_input[product_cat][]" value="205"> Cosmetics</label></li>

                    <li id="product_cat-273"><label class="selectit"><input type="checkbox" id="in-product_cat-273" name="tax_input[product_cat][]" value="273"> Hair care</label></li>

                    <li id="product_cat-272"><label class="selectit"><input type="checkbox" id="in-product_cat-272" name="tax_input[product_cat][]" value="272"> Skin care</label></li>
                </ul>
            </li>
            <li id="product_cat-214"><label class="selectit"><input type="checkbox" id="in-product_cat-214" name="tax_input[product_cat][]" value="214"> nutrition</label></li>
        </ul>
    </li>

    <li class="popular-category" id="product_cat-206"><label class="selectit"><input type="checkbox" id="in-product_cat-206" name="tax_input[product_cat][]" value="206"> Clothing,Shoes &amp; Jewelry</label>
        <ul class="children">

            <li class="popular-category" id="product_cat-223"><label class="selectit"><input type="checkbox" id="in-product_cat-223" name="tax_input[product_cat][]" value="223"> Accessories &amp; Jewelry</label></li>

            <li class="popular-category" id="product_cat-229"><label class="selectit"><input type="checkbox" id="in-product_cat-229" name="tax_input[product_cat][]" value="229"> Clothing</label></li>

            <li class="popular-category" id="product_cat-208"><label class="selectit"><input type="checkbox" id="in-product_cat-208" name="tax_input[product_cat][]" value="208"> Handbags</label></li>

            <li id="product_cat-217"><label class="selectit"><input type="checkbox" id="in-product_cat-217" name="tax_input[product_cat][]" value="217"> Shoes</label></li>
        </ul>
    </li>

它看起来像这样：http://prntscr.com/78hm0o

现在我希望用户可以一次选择一个主要类别和任何一个子类别(如果存在子类别).

到目前为止我尝试了什么：

$(':checkbox').on('change',function(){
 var th = $(this),name = th.attr('name'); 
 if(th.is(':checked')){
     $(':checkbox[name="'  + name + '"]').not(th).prop('checked',false);   
  }
});

由于每个类别和子类别的名称属性相同.因此,使用此代码一次只能选择一个.这不是我想要的.

解决方法

试试这个：

$(':checkbox').on('click',function(){
    // uncheck every checkbox
    $(':checkbox').prop('checked',false);
    // set initial variables
    var checkbox = $(this),$ul,has_parent;
    // loop
    do {
        // tick the selected checkbox
        checkbox.prop('checked',true);
        // get its closest UL
        $ul = checkbox.closest('ul');
        // check if selected category has a parent
        has_parent = $ul.prev().is('.selectit');
        // set the new checkbox to the one that belong to the parent
        checkbox = $('> input',$ul.prev());
    } while ( has_parent );
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!