Страницы

Поиск по вопросам

воскресенье, 9 февраля 2020 г.

Все задачи помечаются выполненными при клике на чекбокс

#javascript #jquery 


Недавно начал изучать jquery и возникла проблема. Есть список дел, если кликнуть
на чекбокс "вополнено" зачеркиваются все дела.Мне не приходит в голову как это можно
реализовать. При снятии флажка задача должна становится опять не зачеркнутой. Код прилагаю.
HTML в нем нет, не пугайтесь, такая задача.

$(document).ready(function() {
$('
').appendTo('body');
$('
').addClass('table-title').appendTo('fieldset');
$('
Список: 
').appendTo('.table-title');
$('
').appendTo('.table-title');
$('').appendTo('.table-title > div');
$('').attr('id', 'text').attr('type', 'text').appendTo('label');
$('').attr('id', 'plus').attr('type', 'button').attr('value', 'Добавить').appendTo('label');
$('').height('auto').attr('id', 'myTable').addClass('table-fill').appendTo('fieldset');
$('').appendTo('table');
$('').addClass('list_link').appendTo('tr');
$('').addClass('list_link').appendTo('tr');
$('').addClass('list_link').appendTo('tr');

var number = 0;

    $('#plus').click(function(){
        number++;
        var task = $('#text').val();

        $('').appendTo('table');
        $('').text(number).appendTo('tr:last-child');
        $('').text(task).addClass('task').appendTo('tr:last-child');
        $('').appendTo('tr:last-child');
        $('').appendTo('tr:last-child > th:last-child');
        $('').attr('type', 'checkbox').appendTo('tr:last-child > th:last-child');

        $('input[type = checkbox]').click(function(){
            if ($('input:checkbox:checked')) {
                $('.task').addClass('thro');
            }
        })
    });
})

    


Ответы
Ответ 1


Все чекбоксы на странице:

$('input[type=checkbox]')


Все чекбоксы внутри el:

$('input[type=checkbox]', el)
el.find('input[type=checkbox]')




В Вашем случае, Вам нужно добавлять класс не всем, а только нужным элементам.
Например, $('.task', $(this).parent()).addClass('thro')


Ответ 2


Вы, вероятно, имели в виду создавать элементы td внутри строк таблицы.

Второе. Нет необходимости назначать обработчики click каждый раз, когда создается
новая строка. Более того, в Вашем коде новый обработчик каждый раз добавляется всем
существующим в данный момент чекбоксам. Следует использовать делегирование:

$(document).ready(function() {
  ...
  // один раз, в конце $(document).ready, когда myTable уже существует
  $("#myTable").on("click", "input[type='checkbox']", function() {
    if (this.checked) { 
      $(this).closest("tr").find(".task").addClass("thro"); 
    } else {
      $(this).closest("tr").find(".task").removeClass("thro"); 
    }
  });
});






Автор:



на






















Ярлыки:
,
,














Комментариев нет:















Отправить комментарий

















Подписаться на:
Комментарии к сообщению (Atom)














№ОписаниеДействие