Создать простой список задач J Query

Question

Создать простой список задач J Query

0

Я пытаюсь создать простой список todo в 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;
}

JQuery:

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

Пожалуйста помоги

user2798091 20 сен. 2013, в 09:33

Источник

Теги:

javascript

jquery

html

css

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

Ganesh Pandhere 20 сен. 2013, в 06:03

Ещё вопросы

Vinay Pratap Singh · Accepted Answer · 2013-09-20T06-18-00.000Z

Измените свой 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');
});

Новая демонстрационная скрипка

@ user2798091 проверить обновленный ответ
большое спасибо .. сделал это действительно просто