时间戳

首页 > 解决方案 > 基于选定的父单选按钮使用 javascript 取消选中单选按钮

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

问题描述

我有一组单选按钮。如果您选择“Dagelijks, wekelijks, maandelijks”，则带有粉红色背景的 div 是不可见的（显示：无）。只有当您选择单选按钮“Geen”时，粉红色的 div 才会显示。 单选按钮的图像。

我使用以下 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 中的所有值。

有谁知道如何实现这一目标？

标签： javascriptjqueryhtml

解决方案

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

要解决您描述的问题，您需要将checked每个单选按钮的属性设置#div-pauze为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>

推荐阅读