javascript - 使用基于所选父单选按钮的 JavaScript 取消选中单选按钮

Question

我有一组单选按钮。如果您选择“Dagelijks、wekelijks、maandelijks”，则粉红色背景的 div 将不可见(显示:无)。仅当您选择单选按钮“Geen”时，粉红色的 div 才会显示。 Image of radiobuttons .

我使用以下 JS 来显示 ID 为 div-pauze 的 div:

<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”单选按钮时，它应该清除该 div 中的所有值。

有人知道如何实现这个目标吗？

Answer 1

首先请注意，您的 HTML 示例缺少 div 上的 id="div-pauze" 属性，但我认为这是问题中的拼写错误，否则它根本无法工作。

要解决您描述的问题，您需要将 #div-pauze 中每个单选按钮的 checked 属性设置为 false。您可以通过使用 querySelectorAll() 选择它们，然后循环遍历它们来完成此操作。

还值得注意的是，您可以对此处的代码进行一些改进。首先，如果将单选 input 元素包装在 label 中，则可以删除 for 属性以使 HTML 更短、更简单。

其次，不要使用内联事件属性。使用 addEventListener() 以不显眼的方式附加您的事件处理程序。同样，在复选框、单选按钮和选择元素上始终使用 change 事件，而不是 click。

话虽如此，试试这个:

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>