Reputation: 207
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
Reputation: 43156
You can use the next()
method to access the respective <label>
as follows:
$('input[type="checkbox"]').click(function () {
$(this).next().toggleClass("checked");
});
Upvotes: 4
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
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
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");
}
});
Upvotes: 0