Javascript在标签上添加css类

我的html如下所示：

<table class="ListCheck">
<tbody>
<tr>
<td>
<span class="listitem">
    <input name="ctl00$MainContent$List$0" class="location" id="MainContent_List_0" type="checkbox">
    <label for="MainContent_List_0">test</label></span>
</td>
<td>
<span class="listitem">
    <input name="ctl00$MainContent$List$1" class="location" id="MainContent_List_1" type="checkbox">
    <label for="MainContent_List_1">test</label></span>
</td>
<td>
<span class="listitem">
    <input name="ctl00$MainContent$List$2" class="location" id="MainContent_List_2" type="checkbox">
    <label for="MainContent_List_2">test</label></span>
</td>
</tr>
</tbody>
</table>

测试
测试
测试

我正在尝试添加javascript，以便在选中复选框时在标签上添加一个类来应用一些css

我的剧本是：

<script type='text/javascript'>
        $('.listitem').each(function () {
            $(this).children("input").addClass("location");
            if ($(this).children("input").is(":checked"))
            {
                $(this).children('label').addClass("checked");
            } else {
                $(this).children('label').removeClass("checked");
            }
        });
</script>

$（'.listitem'）。每个（函数（）{
$（this）.children（“输入”）.addClass（“位置”）；
如果（$（this）.children（“输入”）为（“：选中”））
{
$（this）.children（'label'）.addClass（“选中”）；
}否则{
$（this）.children（'label'）.removeClass（“选中”）；
}
});

但由于某些原因，它没有在运行时将类添加到标签上。请看我的代码，让我知道我遗漏了什么。TIA。

您可以使用该方法访问相应的

，如下所示：

$('input[type="checkbox"]').click(function () {
     $(this).next().toggleClass("checked");
});

您可以使用该方法访问相应的

，如下所示：

$('input[type="checkbox"]').click(function () {
     $(this).next().toggleClass("checked");
});

---

尝试将您的代码用于

    $( ".target" ).change(function() {
      alert( "Handler for .change() called." );
    });

所以

$（'.listitem'）。每个（函数（）{
$（this）.children（“输入”）.addClass（“位置”）；
$（this）.children（“输入”）.change（function（）{
如果（$（this）.children（“输入”）为（“：选中”））
{
$（this）.children（'label'）.addClass（“选中”）；
}否则{
$（this）.children（'label'）.removeClass（“选中”）；
}
})；//缺少括号；）
});

尝试将您的代码用于

    $( ".target" ).change(function() {
      alert( "Handler for .change() called." );
    });

所以

$（'.listitem'）。每个（函数（）{
$（this）.children（“输入”）.addClass（“位置”）；
$（this）.children（“输入”）.change（function（）{
如果（$（this）.children（“输入”）为（“：选中”））
{
$（this）.children（'label'）.addClass（“选中”）；
}否则{
$（this）.children（'label'）.removeClass（“选中”）；
}
})；//缺少括号；）
});

我对你的代码做了一点修改，如果我对你的理解是正确的，那就错了

   $('.location').click(function() {
                if ($(this).is(":checked"))
                {
                     console.log('added');
                    $(this).closest('label').addClass("checked");
                } else {
                    console.log('removed');
                    $(this).closest('label').removeClass("checked");
                }
    });

---

我对你的代码做了一点修改，如果我对你的理解是正确的，那就错了

   $('.location').click(function() {
                if ($(this).is(":checked"))
                {
                     console.log('added');
                    $(this).closest('label').addClass("checked");
                } else {
                    console.log('removed');
                    $(this).closest('label').removeClass("checked");
                }
    });

---

您的javascript代码应该如下所示：

    $('.listitem').click(function () {
        $(this).children("input").addClass("location");
        if ($(this).children("input").is(":checked"))
        {
            $(this).children('label').addClass("checked");
        } else {
            $(this).children('label').removeClass("checked");
        }
    });

---

单击应用于选择器找到的所有元素。

您的javascript代码应如下所示：

    $('.listitem').click(function () {
        $(this).children("input").addClass("location");
        if ($(this).children("input").is(":checked"))
        {
            $(this).children('label').addClass("checked");
        } else {
            $(this).children('label').removeClass("checked");
        }
    });

---

单击应用于选择器找到的所有元素。

这就是jquery-yo，不需要混合纯js，那么运行时是什么意思，您的意思是当您实际去检查某些内容或在pageload中预先检查某些内容时？对于第一个，您需要一些事件处理。缺少span和input标记的结束标记。请验证它在实际代码中不存在。在元素添加到页面之前是否调用它？否，选中复选框时需要运行，将css类添加到标签中，这样复选框下面的标签将以不同的字体和颜色显示。这就是jquery yo，不需要混合纯js，您所说的运行时是什么意思，您的意思是当您实际去检查某些内容或在pageload中预检查某些内容时？对于第一个，您需要一些事件处理。缺少span和input标记的结束标记。请验证它在实际代码中不存在。在元素添加到页面之前是否调用它？否，选中复选框时需要运行，将css类添加到标签中，这样复选框下方的标签将以不同的字体和颜色显示。我需要将css类添加到标签中，而不是输入中field@svg它正在增加标签。检查fiddle我需要将css类添加到标签，而不是输入field@svg它正在增加标签。检查小提琴