如果使用 jQuery 选中复选框，则将父项的 class 复制到其父项的父项的 class

Question

例子

之前：

<ul>    
    <li class="cat-item cat-item-1">
        <input type="checkbox" id="1"></li>
    <li class="cat-item cat-item-2 current-cat">   
        <input type="checkbox" id="2"></li>       <-checked
</ul>

我希望在它的父项 class 中包含 "cat-item-#number#"，当它也是 "current-cat" 或者当它的复选框状态被选中时。（复选框可以默认开始选中）

Jquery之后：

<ul class="cat-item-2"> 
    <li class="cat-item cat-item-1">
        <input type="checkbox" id="1"></li>
    <li class="cat-item cat-item-2 current-cat">
        <input type="checkbox" id="2"></li>       <-checked
</ul>

选中第一个复选框后：

<ul class="cat-item-1 cat-item-2">  
    <li class="cat-item cat-item-1">
        <input type="checkbox" id="1"></li>       <-checked
    <li class="cat-item cat-item-2 current-cat">
        <input type="checkbox" id="2"></li>       <-checked
</ul>

然后在取消选中第二个复选框后：

<ul class="cat-item-1"> 
    <li class="cat-item cat-item-1">
        <input type="checkbox" id="1"></li>       <-checked
    <li class="cat-item cat-item-2 current-cat">
        <input type="checkbox" id="2"></li>
</ul>

我该怎么做？我不在乎 class 中的第一个 "cat-item" 是否也被复制了。

我不知道 jquery，但我想做这样的事情：

初始化：

$if(":checkbox") is checked -> $(this).parent().parent().toggleClass((this.parent().class());

点击：

$(":checkbox").on('click', function(){
if(":checkbox") is checked -> $(this).parent().parent().toggleClass((this.parent().class());
if ((":checkbox") is unchecked) -> remove it's class from paren.parent's class});

Answer 1

$(document).ready(function () {
    $("#chkbox1").click(function () {
        if ($(this).is(":checked")) {
            $(this).parent().parent().addClass("cat-item-1");
        } else {
            $(this).parent().parent().removeClass("cat-item-1");
        }
    });
    $("#chkbox2").click(function () {
        if ($(this).is(":checked")) {
            $(this).parent().parent().addClass("cat-item-2");
        } else {
            $(this).parent().parent().removeClass("cat-item-2");
        }
    });
});

Answer 2

您可以尝试类似的方法：

$(".cat-item [type=checkbox]").change(function() {
    $(".current-cat").removeClass("current-cat");

    if ($(this).prop("checked"))
        $(this).parent().parent().addClass("cat-item-" + $(this).attr("id"));
    else
        $(this).parent().parent().removeClass("cat-item-" + $(this).attr("id"));
});

下面的代码将运行加载页面并将负责添加类已选中的复选框：

$(document).ready(function() {
    $(".cat-item [type=checkbox]").each(function() {
        if ($(this).prop("checked"))
            $(this).parent().parent().addClass("cat-item-" + $(this).attr("id"));
        else
            $(this).parent().parent().removeClass("cat-item-" + $(this).attr("id"));
    });
});

这是一个工作演示：JSFiddle

Answer 3

检查这个。

这适用于模式 cat-item-#number#（即使有不止一种这样的模式并且也独立于 id）

 jQuery(document).ready(function($){
    $("input[type=checkbox]").on('click', function(){

    $parent = $(this).parent();
    var cls = $parent.attr('class').match(/[\w-]*cat-item-[\w-]*/g);
        cls = cls.join(' ');

       if($(this).is(":checked")){
           $parent.parent().addClass(cls);
       }
        else{
            $parent.parent().removeClass(cls);
        }
    });
    });

JSFiddle

如果使用 jQuery 选中复选框，则将父项的 class 复制到其父项的父项的 class

Copy parent's class to it's parent's parent's class if checkbox is checked with jQuery

jquery

class

checkbox

parent