Блог

Главная - Вопросы по программированию - Как я могу правильно обработать эти флажки? Код ниже, я перепробовал много вариантов

Как я могу правильно обработать эти флажки? Код ниже, я перепробовал много вариантов

#javascript

#javascript

Вопрос:

Я пытаюсь пометить метку, которая обтекает абзац и невидимый флажок. Я хотел бы изменить только этот стиль метки, чтобы проверялся дочерний ввод / все, о чем я, вероятно, пока не имею представления.

 let optionChecks = document.querySelectorAll('.option-checkbox');
optionChecks = Array.from(optionChecks);

optionChecks.forEach(check => {
    check.addEventListener('change', e => {
        if(e.target === e.currentTarget){
            check.parentElement.classList.remove('option-unchecked');
            check.parentElement.classList.add('option-checked');
            check.nextElementSibling.classList.remove('text-unchecked');
            check.nextElementSibling.classList.add('text-checked');

            
        }
        else {
            check.parentElement.classList.remove('option-checked');
            check.parentElement.classList.add('option-unchecked');
            check.nextElementSibling.classList.remove('text-checked');
            check.nextElementSibling.classList.add('text-unchecked');
        }
    })
})

Я не ожидаю, что решение будет копировать: D Я хотел бы получить какую-то подсказку или что-то для самостоятельного поиска. Бросьте мне вызов ! : D

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

1. Вы можете проверить, check установлен флажок или нет, с помощью check.checked

2. Спасибо, это одно из решений, которое я пытался реализовать вначале, но даже после того, как я проверяю другой радиовход (я знаю, что он переключает свой «проверенный» attr), стиль надписей по-прежнему остается таким, как если бы радиовход был проверен. Это проблема пользовательского интерфейса: D

3. Это Knockout.js ?

4. Это ванильный JS. Я уже решил это сам, пока мой старший друг-разработчик читал мой код. Решение для дальнейшего использования приведено ниже 🙂

Ответ №1:

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

 const optionChecks = document.querySelectorAll('.option-checkbox');

optionChecks.forEach(check => {
    check.addEventListener('change', e => {
        optionChecks.forEach(check => {
            check.parentElement.classList.remove('option-checked');
            check.nextElementSibling.classList.remove('text-checked');
            check.nextElementSibling.classList.add('text-unchecked')
        })
        e.currentTarget.parentElement.classList.add('option-checked');
        e.currentTarget.nextElementSibling.classList.remove('text-unchecked');
        e.currentTarget.nextElementSibling.classList.add('text-checked');
    })
})

Для более глубокого понимания:

  • сначала я выбрал все свои радиовходы по имени класса
  • затем передал все это прослушивателю событий «onchange»
  • затем снова прокрутил их все, чтобы убедиться, что все parents и nextsiblings имеют стиль по умолчанию
  • затем стиль currentTarget родительский и следующий родной

и это все, я надеюсь, что это поможет кому-то с подобной проблемой 🙂