表单中的单选按钮，如果选中一个则取消选中其他按钮？答案

【问题标题】：Radio buttons in the form, if one checked then unchecked the others?表单中的单选按钮，如果选中一个则取消选中其他按钮？
【发布时间】：2017-06-30 20:59:31
【问题描述】：

我的表单中有三组不同的单选按钮。如果我单击单选按钮，我看不到属性检查设置为 true。我想知道在 JQuery/JavaScript 中处理这个问题的最佳方法是什么？这是一个例子：

$("input[type=radio]").on('click', function() {
  var secondClick = true;
  $(this).change(function() {
    secondClick = false;
  });
  $(this).click(function() {
    if (secondClick) {
      $(this).prop("checked", false);
    }
    secondClick = true;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
  <div class="formItem">
    <label for="evaluation">Evaluation</label>
    <input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
    <input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
  </div>
  <div class="formItem">
    <label for="conditions">Conditions</label>
    <input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
    <input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
    <input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
  </div>
  <div class="formItem">
    <label for="responses">Responses</label>
    <input type="radio" name="frm_res" id="frm_res1" value="0" />Good
    <input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
    <input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
  </div>
</form>

上面的函数没有改变/设置我点击的元素的属性checked=true。我希望看到选中的元素的属性被选中为 true，并且所有其他复选框都设置为 false。

【问题讨论】：

在第二组你有不同的名字frmhs_cond而不是frm_cond

标签： javascript jquery radio-button

【解决方案1】：

var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
  var $this = $(this)
  
  if ($this.is(':checked')) {
    radioInputs.not($this).removeAttr('checked')
  }
})

【讨论】：

【解决方案2】：

您在条件中的第二个输入被命名为 frmhs_cond 而不是 frm_cond

<form name="myForm" id="myForm" method="POST" action="#">
            <div class="formItem">
                <label for="evaluation">Evaluation</label>
                <input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
                <input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
            </div>
            <div class="formItem">
                <label for="conditions">Conditions</label>
                <input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
                <input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
                <input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
            </div>
            <div class="formItem">
                <label for="responses">Responses</label>
                <input type="radio" name="frm_res" id="frm_res1" value="0" />Good
                <input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
                <input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
            </div>
         </form>

【讨论】：