【问题标题】:Validating multiple groups of two radio buttons验证多组两个单选按钮
【发布时间】:2017-11-18 03:45:53
【问题描述】:

如何验证多组两个单选按钮,其中一个单选为真,另一个单选为假。我正在使用 Javascript,但它无法正常工作。我的意思是,如果我从这些组中选择任何一台收音机,它就会验证并提交它。请参阅下面的代码。

  <form name="form1" action="http://example.com/" onsubmit="return 
    validateForm()" method="post">
    <div class="btn-group" data-toggle="buttons">
      <label id="yes" class="btn btn-success">
        <input id="true" name="options" type="radio" /> Yes
      </label>
      <label id="no" class="btn btn-success">
        <input id="false" name="options" required="" type="radio" /> No
      </label>
    </div>
    <div class="btn-group" data-toggle="buttons">
      <label id="yes1" class="btn btn-success">
        <input id="true" name="options" type="radio" /> Yes
      </label>
      <label id="no1" class="btn btn-success">
        <input id="false" name="options" required="" type="radio" /> No
      </label>
    </div>
  </form>
  <script>
  function validateForm() {
    var radios = document.getElementsById("true");
    if (radios.checked = true) {
      return true;
    } else {
      alert("error");
    }
  }
  </script>

我想验证所有正确的选项。如果其中任何一个被错误选择,它应该给出一个错误。你能帮帮我吗?

【问题讨论】:

  • 你好!页面上不能有多个相同的id。需要重写HTML。

标签: javascript forms validation radio-button


【解决方案1】:

你来了,

原版 JavaScript 解决方案:

<form id="form_1" name="form" action="#" method="POST">
  <div class="btn-group" data-toggle="buttons">
    <input class="radio_btn" type="radio" name="group1" value="true">Yes
    <input class="radio_btn" type="radio" name="group1" value="false">No
  </div>
  <div class="btn-group" data-toggle="buttons">
    <input class="radio_btn" type="radio" name="group2" value="true">Yes
    <input class="radio_btn" type="radio" name="group2" value="false">No
  </div>
  <button type="submit">Submit</button>
</form>

<script>
  var form = document.querySelector('#form_1');
  var radioList = form.querySelectorAll('.radio_btn');

  form.addEventListener('submit', function() {
    for (var i = 0, length1 = radioList.length; i < length1; i++) {
      if (radioList[i].getAttribute('value') == 'false' && radioList[i].checked) {
        alert("error");
        return false;
      }
    }
  });
</script>

*我重写了 HTML 代码。

【讨论】:

  • 一切正常,但如果选择了真正的,我想重定向它....我尝试使用 action="#" 但它会重定向天气它的真假的问题
猜你喜欢
  • 2013-02-10
  • 2018-11-23
  • 2013-06-16
  • 1970-01-01
  • 2012-11-11
  • 2021-08-30
  • 1970-01-01
  • 2011-01-08
  • 1970-01-01
相关资源
最近更新 更多