I'm currently working on a basic to-do list in Javascript, but I've encountered an issue. When I check the checkbox, the style of the adjacent text doesn't change as expected. Instead, it's the heading text that is affected by the changes. Here's a link to the JSFiddle for reference.
Here's the HTML:
<table border="1">
<tr>
<td>
<input type="checkbox" value="None" id="squaredTwo" name="check" />
</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>
<input type="checkbox" value="None" id="squaredTwo" name="check" />
</td>
<td>row 2, cell 2</td>
</tr>
</table>
<h2> Heading 2</h2>
CSS:
.newclass {
text-decoration: line-through;
color: red;
}
JQuery:
$('input[type="checkbox"]').click(function () {
if ( this.checked ) {
//alert('Checked');
$("h2").addClass('newclass');
} else {
//alert('Unchecked');
$("h2").removeClass('newclass');
}
});
Any assistance would be greatly appreciated.