Question

我的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>

但由于某种原因，它不是在运行时在标签上添加类。请查看我的代码，让我知道我错过了什么。 TIA。

Answer 1

您可以使用next()方法访问相应的<label>，如下所示：

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

Working fiddle

Answer 2

尝试使用

代码

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

所以

<script type='text/javascript'>
        $('.listitem').each(function () {
            $(this).children("input").addClass("location");

            $(this).children("input").change(function() {

            if ($(this).children("input").is(":checked"))
            {
                $(this).children('label').addClass("checked");
            } else {
                $(this).children('label').removeClass("checked");
            }
          });// missing bracket ;)
        });
</script>

Answer 3

我改变了你的代码，如果我理解你的话就错了。

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

http://jsfiddle.net/W7nr4/

Answer 4

您的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在标签上添加css类

4 个答案: