在单击任何子复选框的地方标记父项

Question

我有我的类别和子类别的树视图。树太长，无法在类别下找到选定的子类别。

<ul id="user_tender_cat" class="treeview-black treeview">
    <li class="expandable"><div class="hitarea expandable-hitarea"></div>
        <span>
            <input name="cat_ids[]" class="cat-ids cat-id-1" value="1" checked="checked" type="checkbox">
            Agricultural/Forestry/Nursery Items
        </span>
        <ul>
            <li>
                <span>
                    <input name="sub_cat_ids[]" class="sub-cat-ids sub-cat-id-2" value="2" type="checkbox">
                    Agricultural Machinery &amp; Equipment
                </span>
            </li>
            <li>
                <span>
                    <input name="sub_cat_ids[]" class="sub-cat-ids sub-cat-id-1" value="1" type="checkbox">
                    Agricultural Pruducts
                </span>
            </li>
            ........
        </ul>
    </li>
    <li class="expandable"><div class="hitarea expandable-hitarea"></div>
        <span>
            <input name="cat_ids[]" class="cat-ids cat-id-2" value="2" checked="checked" type="checkbox">
            Art/Craft/Entertainment/Fashion/Painting
        </span>
        <ul>
            <li>
                <span>
                    <input name="sub_cat_ids[]" class="sub-cat-ids sub-cat-id-21" value="21" type="checkbox">
                    Advertisement &amp; Related
                </span>
            </li>
            <li>
                <span>
                    <input name="sub_cat_ids[]" class="sub-cat-ids sub-cat-id-19" value="19" type="checkbox">
                    Band/Musical Instrument
                </span>
            </li>
            ......
        </ul>
    </li>
    ............
</ul>

现在我想添加一个 class 到选中任何子子类别的类别跨度。我已经尝试了一些 jQuery 但仍然没有找到任何好的解决方案。那么有没有人可以帮助我。提前致谢。

Answer 1

您可以使用：

 $('#user_tender_cat input').change(function(){
   $(this).parent().toggleClass('smclass',this.checked);
 }).change();

Working Demo

Answer 2

在更改任何子类别时，Jquery 使用选择器函数找到特定的 父类别 并添加 selected class致家长 category.Try 阅读更多 selector function here。希望这可能对您有所帮助。 :)

$('.expandable .sub-cat-ids').change(function(){
    if($(this).is(':checked'))
    $(this).parents(".expandable").find(".cat-ids").parent().addClass('selected');
 });

Fiddle

在单击任何子复选框的地方标记父项

Mark parent where any child checkbox is clicked

jquery

treeview