首页 文章

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

提问于
浏览 次
0

我的表单中有三组不同的单选按钮 . 如果我单击单选按钮，我看不到属性检查设置为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 .

javascript jquery radio-button

2 回答

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

    条件中的第二个输入名为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>
    回复于

相关问题