Как сделать проверку radioButton на JavaScript

Question

У меня такая проблема: слушателю абсолютно всё равно, что я передаю как значение для проверки. Он таргитится на <input class="form-check-input" type="radio" name="knowledge" id="flexRadioStudyYes" value="Study_Yes">, а конкретно на value! Мне нужно заменить value="Study_Yes" на value="Yes", чтобы корректно передавать значение в БД, но если я это делаю, то перестаёт работать скрипт! Пробовала заменить проверку через checked, но результат тот же - не работает!


  <div class="form-check">
    <input class="form-check-input" type="radio" name="knowledge" id="flexRadioStudyYes" value="Study_Yes"> 
    <label class="form-check-label" for="flexRadioStudyYes">Yes</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="knowledge" id="flexRadioStudyNo" value="Study_No">
    <label class="form-check-label" for="flexRadioStudyNo">No</label>
  </div>
    <div class="collapse" id="collapseforStudyYes">
      <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="NordicAcademy">
      <label class="form-check-label" for="NordicAcademy">The Nordic Academy</label>
      </div>
    </div>
  <script src="script/script_for_registration/knowledge.js"></script>

Вот сам скрипт:

document.querySelectorAll('input[name="knowledge"]').forEach(function(radio) {
  radio.addEventListener('change', function() {
    var value = this.value;
    var collapse_for_Study_Yes = document.getElementById('collapseforStudyYes');

    if (value === 'Study_Yes') {
      collapse_for_Study_Yes.classList.add('show');
    } else {
      collapse_for_Study_Yes.classList.remove('show');
    }
  });
});

Answer 1

Если я правильно понял, то класс .show отвечает просто за видимость блока #collapseforStudyYes. Тогда можно реализовать всё одним CSS-правилом без использования дополнительных классов и скриптов:

.form-check:has(#flexRadioStudyYes:not(:checked)) ~ #collapseforStudyYes {
  display: none;
}

<div class="form-check">
  <input type="radio" name="knowledge" id="flexRadioStudyYes" class="form-check-input" value="Yes">
  <label for="flexRadioStudyYes" class="form-check-label">Yes</label>
</div>
<div class="form-check">
  <input type="radio" name="knowledge" id="flexRadioStudyNo" class="form-check-input" value="No">
  <label for="flexRadioStudyNo" class="form-check-label">No</label>
</div>
<div id="collapseforStudyYes" class="collapse">
  <div class="mb-3 form-check">
    <input type="checkbox" id="NordicAcademy" class="form-check-input">
    <label for="NordicAcademy" class="form-check-label">The Nordic Academy</label>
  </div>
</div>

БЛОГ НА HUSL

Как сделать проверку radioButton на JavaScript

Ответы (1 шт):