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

因为

name

每个类别和子类别的属性都是相同的。因此，使用此代码一次只能选择一个。这不是我想要的。

试试这个：

$(':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 );
});

---

哦，好的，对不起，但我还不明白：你能举个例子，说明当点击复选框时，你希望它的行为如何吗？可能使用这些值来标识复选框。

$(':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 );
});