javascript - 创建简单 J Query 待办事项列表

Question

我正在尝试在JavaScript中创建一个简单的待办事项列表，但是由于某种原因，当复选框被打勾时，与之相邻的样式文本不会改变，而是根据小提琴的标题文本样式更改

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

查询：

$('input[type="checkbox"]').click(function () {
    if ( this.checked ) {
        //alert('Checked');
        $("h2").addClass('newclass');
    } else {
        //alert('Unchecked');
        $("h2").removeClass('newclass');
    }
});

请帮忙

Answer 1

当您在单击复选框时将 H2 元素定位为样式时，就会发生这种情况。而是使用下一个 TD 元素。

$('input[type="checkbox"]').click(function() {
if (this.checked) {
    //alert('Checked');
    $(this).parent().next().addClass('newclass');
} else {
    //alert('Unchecked');
    $(this).parent().next().removeClass('newclass');
}
});

Answer 2

像这样改变你的Jquery

$('input[type="checkbox"]').click(function () {
if (this.checked) {
    //alert('Checked');
    $(this).closest("td").next().addClass('newclass');
} else {
    //alert('Unchecked');
    $(this).closest("td").next().removeClass('newclass');
}
});

演示小提琴

甚至比这更简单

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

新的演示小提琴