Отключение радиокнопки с javascript на основе выбранной родительской радиокнопки

Question

У меня есть группа радиокнопок. Если вы выберете «Dagelijks, wekelijks, maandelijks», то div с розовым фоном будет невидимым (отображение: нет). Только когда вы выбираете радиокнопку "Geen", показывается розовый div. Изображение радиокнопок .

Я использовал следующий JS, чтобы показать div с идентификатором div-pauze:

<script>
    function show1(){document.getElementById('div-pauze').style.display ='none';}
    function show2(){document.getElementById('div-pauze').style.display = 'block';}
</script>

Это разметка HTML:

     <ul class="list-unstyled radio-horizontal">
          <li><input id="dagelijks-test" name="dbfield55" type="radio" value="Dagelijks" onclick="show1();"><label for="dagelijks-test">Dagelijks</label></li>
          <li><input id="wekelijks-test" name="dbfield55" type="radio" value="Wekelijks" onclick="show1();"><label for="wekelijks-test">Wekelijks</label></li>
          <li><input id="maandelijks-test" name="dbfield55" type="radio" value="Maandelijks" onclick="show1();"><label for="maandelijks-test">Maandelijks</label></li>
          <li><input id="geen-test" name="dbfield55" type="radio" value="Geen" onclick="show2();"><label for="geen-test">Geen</label></li>
     </ul>

     <div class="col-sm-12 div-pauze">
          <h4>Tijdelijk pauzeren</h4>
              <p>Weet u zeker dat u onze nieuwsbrief niet meer wilt ontvangen? U kan de nieuwsbrief ook tijdelijk pauzeren.</p>
        <ul class="list-unstyled">
          <li><input id="3-maanden" name="dbfield" type="radio" value="Dagelijks"><label for="3-maanden">Ik wil de nieuwsbrief pauzeren voor 3 maanden</label></li>
          <li><input id="6-maanden" name="dbfield" type="radio" value="Wekelijks" ><label for="6-maanden">Ik wil de nieuwsbrief pauzeren voor 6 maanden</label></li>
          <li><input id="uitschrijven" name="dbfield" type="radio" value="Geen"><label for="uitschrijven">Ik wil me nu definitief uitschrijven</label></li>
        </ul>
    </div>

Проблема в том, что, если я отменил выбор "Geen" и выбрал любую другую радиопереключатель, значение в розовом div все еще выбирается, в то время как только div изменено, чтобы ничего не отображать. Когда вы отмените выбор радиокнопки «Geen», она должна очистить все значения в этом разделе.

Кто-нибудь знает, как этого добиться?

Answer 1

Во-первых, обратите внимание, что в вашем примере HTML отсутствует атрибут id="div-pauze" в div, но я предполагаю, что это опечатка в вопросе, иначе она не будет работать вообще.

Чтобы устранить проблему, которую вы описываете, вам нужно установить свойство checked каждой радиокнопки в пределах #div-pauze на false. Вы можете сделать это, выбрав их все с помощью querySelectorAll() и затем просматривая их.

Стоит также отметить, что здесь можно внести несколько улучшений в код. Во-первых, если вы оберните элементы input в label, вы можете удалить атрибут for, чтобы сделать HTML короче и проще.

Во-вторых, не использует встроенные атрибуты события . Присоединяйте свои обработчики событий незаметно, используя addEventListener(). Аналогично, всегда используйте событие change вместо click на флажках, рад ios и выберите элементы.

После всего сказанного попробуйте это:

var pauze = document.querySelector('#div-pauze');

document.querySelectorAll('.close').forEach(el => el.addEventListener('change', function() {
  pauze.style.display = 'none';
  pauze.querySelectorAll('input').forEach(el => el.checked = false);
}))

document.querySelectorAll('.open').forEach(el => el.addEventListener('change', function() {
  pauze.style.display = 'block';
}));

#div-pauze {
  display: none;
}

<ul class="list-unstyled radio-horizontal">
  <li>
    <label>
      <input class="close" name="dbfield55" type="radio" value="Dagelijks" />
      Dagelijks
    </label>
  </li>
  <li>
    <label>
      <input class="close"name="dbfield55" type="radio" value="Wekelijks" />
      Wekelijks
    </label>
  </li>
  <li>
    <label>
      <input class="close" name="dbfield55" type="radio" value="Maandelijks" />
      Maandelijks
    </label>
  </li>
  <li>
    <label>
      <input class="open" name="dbfield55" type="radio" value="Geen" />
      Geen
    </label>
  </li>
</ul>

<div id="div-pauze" class="col-sm-12 div-pauze">
  <h4>Tijdelijk pauzeren</h4>
  <p>Weet u zeker dat u onze nieuwsbrief niet meer wilt ontvangen? U kan de nieuwsbrief ook tijdelijk pauzeren.</p>
  <ul class="list-unstyled">
    <li>
      <label>
        <input id="3-maanden" name="dbfield" type="radio" value="Dagelijks">
        Ik wil de nieuwsbrief pauzeren voor 3 maanden
      </label>
    </li>
    <li>
      <label>
        <input id="6-maanden" name="dbfield" type="radio" value="Wekelijks">
        Ik wil de nieuwsbrief pauzeren voor 6 maanden
      </label>
    </li>
    <li>
      <label>
        <input id="uitschrijven" name="dbfield" type="radio" value="Geen">
        Ik wil me nu definitief uitschrijven
      </label>
    </li>
  </ul>
</div>

Когда вы пометили вопрос с помощью jQuery, вот реализация jQuery выше:

jQuery(function($) {
  var $pauze = $('#div-pauze');
  
  $('.close').on('change', function() {
    $pauze.hide().find('input').prop('checked', false);
  });
  
  $('.open').on('change', function() {
    $pauze.show();
  });
});

#div-pauze {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-unstyled radio-horizontal">
  <li>
    <label>
      <input class="close" name="dbfield55" type="radio" value="Dagelijks" />
      Dagelijks
    </label>
  </li>
  <li>
    <label>
      <input class="close"name="dbfield55" type="radio" value="Wekelijks" />
      Wekelijks
    </label>
  </li>
  <li>
    <label>
      <input class="close" name="dbfield55" type="radio" value="Maandelijks" />
      Maandelijks
    </label>
  </li>
  <li>
    <label>
      <input class="open" name="dbfield55" type="radio" value="Geen" />
      Geen
    </label>
  </li>
</ul>

<div id="div-pauze" class="col-sm-12 div-pauze">
  <h4>Tijdelijk pauzeren</h4>
  <p>Weet u zeker dat u onze nieuwsbrief niet meer wilt ontvangen? U kan de nieuwsbrief ook tijdelijk pauzeren.</p>
  <ul class="list-unstyled">
    <li>
      <label>
        <input id="3-maanden" name="dbfield" type="radio" value="Dagelijks">
        Ik wil de nieuwsbrief pauzeren voor 3 maanden
      </label>
    </li>
    <li>
      <label>
        <input id="6-maanden" name="dbfield" type="radio" value="Wekelijks">
        Ik wil de nieuwsbrief pauzeren voor 6 maanden
      </label>
    </li>
    <li>
      <label>
        <input id="uitschrijven" name="dbfield" type="radio" value="Geen">
        Ik wil me nu definitief uitschrijven
      </label>
    </li>
  </ul>
</div>