Question

我正在尝试在Javascript中创建一个简单的待办事项列表但由于某些原因勾选复选框时，与其相邻的样式文本不会改变，而标题文本样式会根据fiddle

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

请帮忙

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

Demo Fiddle

比这更简单

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

New Demo Fiddle

创建简单J查询待办事项列表

2 个答案: