svs
svs

Reputation: 207

Javascript to add css class on a label

My html is like this:

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

I am trying to add javascript to add a class on label to apply some css when the checkbox is selected

my script is:

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

But for some reason, it is not adding the class on the label at runtime. Please look at my code and let me know what I am missing. TIA.

Upvotes: 0

Views: 2528

Answers (4)

T J
T J

Reputation: 43156

You can use the next() method to access the respective <label> as follows:

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

Working fiddle

Upvotes: 4

Andrei Terecoasa
Andrei Terecoasa

Reputation: 572

Try using your code with

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

so

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

Upvotes: 1

Kasper Ziemianek
Kasper Ziemianek

Reputation: 1349

Your javascript code should look like this :

    $('.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");
        }
    });

click is applied to all elements found by selector.

Upvotes: 0

Bonik
Bonik

Reputation: 812

I changed your code a little bit, it was wrong if i understood you right.

   $('.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/

Upvotes: 0

Related Questions