Валидация множества input

118
13 июня 2021, 17:30

Код html:

<body>
    <div class="container">
        <h1 class="logo">todoosh</h1>
        <input type="text" id="inp" autocomplete="off">
        <div class="field">
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>

Код css:

.complete{
    text-decoration: line-through;
}

Код js:

function addTask(inputText) {
    var field = document.querySelector('.field'),
        task = document.createElement('div'),
        elemTxt = document.createTextNode(inputText),
        completeCheckBox = document.createElement('input');
    completeCheckBox.type = 'checkbox';
    completeCheckBox.id = 'complete-checkbox';
    // taskComplete();
    task.className = 'task';
    completeCheckBox.addEventListener('click', () => {
        let chbox = document.getElementById('complete-checkbox');
        if (chbox.checked) {
            task.classList.add('complete');
        } else {
            task.classList.remove('complete');
        }
    })
    task.append(completeCheckBox);
    task.append(elemTxt);
    field.prepend(task);
}

Текст в поле с отмеченным чекбоксе должен зачеркиваться, когда чекбокс не отмечен - текст в поле не зачеркнут. В коде приведенном выше работает только наивысшее поле.

Answer 1

Гошподя, зачем весь этот геморрой?

input[type="checkbox"]:checked+label { 
  text-decoration: line-through; 
}
<input id="a1" type="checkbox" /> 
<label for="a1">Text 1</label><br> 
 
 
<input id="a2" type="checkbox" /> 
<label for="a2">Text 2</label>

Всё.

READ ALSO
Angular дерево и таблица
HTML

Angular дерево и таблица

На одной странице должно быть дерево и таблица (как Windows explorer) Как разместить компоненты, чтобы они находились рядом и дерево не сдвигалось...

 115
Баг linq, entity FrameWork
c#

Баг linq, entity FrameWork

В строке Buffer = unBuffer; unBufferClear();

 105
Как изменить пространство имен у формы Visual Studio
c#

Как изменить пространство имен у формы Visual Studio

Работаю над проектом средней крупности в Visual Studio 2019Количество форм проекта дошло до "неудобного", и решил я их раскидать по папкам (сразу не додумался)

 114
Сдвиг рваного массива вниз/вверх
c#

Сдвиг рваного массива вниз/вверх

Турдность состоит в том, что сдвиг должен быть циклическим по строкам и создавать дополнительные(временные) массивы нельзяПо задаче требуеться,...

 107