Снимите флажки с переключателей при нажатии кнопки закрытия

В настоящее время у меня есть модальное окно с некоторыми переключателями ("modal-options") и модальной кнопкой закрытия. Я пытаюсь сделать так, чтобы при нажатии кнопки закрытия все нажатые переключатели становились неотмеченными. текущий код ниже. Консоль говорит, что removeAttr не является функцией...? Спасибо

 <p class='information'> Cancel Appointment? </p>
        <div class="modal-flex">
          <%= f.radio_button :delete_appointment, :true %>
          <%= f.label :delete_appointment_true, "Yes", class: "modal-options cancel" %>
     
          <%= f.radio_button :delete_appointment, :false %>
          <%= f.label :delete_appointment_false, "No", class: "modal-options cancel" %>
          
        </div>

  <p class="close"> <%= t(".close")  %> </p>

var close = document.querySelector(".close");
var buttons = document.querySelectorAll(".modal-options");
close.addEventListener("click", (event) => {
  buttons.forEach(function(button) {
    button.removeAttr('checked');
  });
})

Пожалуйста, добавьте соответствующий HTML....

Mamun 22.05.2019 16:14

Обычно ошибка возникает, когда элемент DOM не выбран должным образом. Предоставление соответствующего HTML-файла может быть полезным.

Ardenne 22.05.2019 16:14
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
299
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

.removeAttr() — это метод jQuery. Эквивалентный метод JavaScript — remove​Attribute().

Хотя я предпочитаю использовать свойство проверил:

button.checked = false;

Вы настраиваете таргетинг на ярлык, а не на кнопку радио:

var buttons = document.querySelectorAll(".modal-flex input[type=radio]");

спасибо, я внес ваше изменение, но ничего не происходит. Я не получаю никаких ошибок

b.herring 22.05.2019 16:29

@b.herring, вы должны выбрать переключатель ..... обновил ответ, пожалуйста, проверьте :)

Mamun 22.05.2019 16:34

Во-первых, removeAttr не является функцией HTML-элементов; вы имели в виду removeAttribute (МДН).

Во-вторых, для отмены ввода вам нужно вместо этого input.checked = false. Причина, по которой removeAttribute не работает, заключается в том, что если вы проверите элемент ввода, вы увидите, что при переключении не добавляется и не удаляется атрибут «checked». «Отмечено» — это свойство, а не атрибут; различие важно в этом случае и при попадании в пользовательские элементы.

  document.querySelector('button').addEventListener('click', () => {
    document.querySelector('input').checked = false;
  });
<input type="checkbox">
<button>uncheck</button>

Я думаю, что оператор может смешивать jQuery с ванильным Javascript

David 22.05.2019 16:16

Обратите внимание, что использование document.querySelector('input') захватит только первый элемент <input> на странице, который может даже не быть флажком.

Peter B 22.05.2019 16:21

Другие вопросы по теме