Question

我正在制作一个带有2个单选按钮的表单。加载表单的页面时，会自动选中“无”的单选按钮。我还希望能够“取消选中”单选按钮，有点像复选框的功能。我设法做到了这一点。现在我还有一件事要做，其中包括以下内容：

如果未选中值为“未确认”的单选按钮，则需要再次自动选中值为“无”的单选按钮。我知道复选框可以很容易，但用户只能选中其中一个选项。

我目前的代码：

var allElems = document.getElementsByTagName('input');
for (i = 0; i < allElems.length; i++) {
  if (allElems[i].type == 'radio' && allElems[i].value == 'none') {
    allElems[i].checked = true;
  }
}

$('form :radio').attr('data-ischecked', function() {
  return this.checked;
}); //set initial status in data-ischecked attribute

$('form').on('click', ':radio', function() {
  var status = $(this).data('ischecked'); //get status
  status && $(this).prop("checked", false); //uncheck if checked
  $(this).data('ischecked', !status); //toggle status
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="none">None</label>
  <input type="radio" id="none" name="myradios" value="none" />
  <label for="unconfirmed">Unconfirmed</label>
  <input type="radio" id="unconfirmed" name="myradios" value="unconfirmed" />
</form>

Answer 1

不判断此非标准行为的有效性（并且不需要初始循环）：

添加

if (this.id=="unconfirmed") $("#none").prop("checked", !this.checked)

像这样

$(function() {
  $("#none").prop("checked", true);
  $("#none").data("ischecked", true);

  $('form').on('click', ':radio', function() {
    var status = $(this).data('ischecked'); //get status
    status && $(this).prop("checked", false); //uncheck if checked
    $(this).data('ischecked', !status); //toggle status        
    if (this.id == "unconfirmed") $("#none").prop("checked", !this.checked)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="none">None</label>
  <input type="radio" id="none" name="myradios" value="none" />
  <label for="unconfirmed">Unconfirmed</label>
  <input type="radio" id="unconfirmed" name="myradios" value="unconfirmed" />
</form>

如果未选中单选按钮，则使用JavaScript自动检查另一个单选按钮

1 个答案: