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>

我想要＆＃34; cat-item-＃number＃＆＃34;在它的父母的课堂上，它也是＆＃34; current-cat＆＃34;或者当它的复选框状态被选中时。（默认情况下，复选框可以开始检查）

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

我该怎么办？我不在乎第一个＆＃34; cat-item＆＃34;从课堂上复制也是如此。

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

初始化：

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

的onClick：

$(":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

3 个答案: