0

私は Javascript で簡単な todo リストを作成しようとしていますが、何らかの理由でチェックボックスがオンになっていると、それに隣接するスタイリングテキストは変更されず、フィドルに従って見出しテキストスタイルが変更されます

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

助けてください

4

2 に答える 2

0

チェックボックスをクリックしてスタイルの 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');
}
});
于 2013-09-20T07:18:29.547 に答える
0

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

新しいデモ フィドル

于 2013-09-20T07:27:17.707 に答える