如何用JavaScript实现取消单选框时自动勾选另一个单选框

嘿，我来帮你搞定这个需求！你已经实现了单选按钮的取消勾选功能，现在只需要加个小逻辑，就能在取消Unconfirmed的时候自动把None重新勾上。

完整代码示例 #

HTML 部分 #

<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 部分 #

// 页面加载默认勾选None
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;
});

// 处理单选按钮点击事件
$('form').on('click', ':radio', function() {
  var $currentRadio = $(this);
  var currentStatus = $currentRadio.data('ischecked');

  if (currentStatus) {
    // 如果当前是勾选状态，点击后取消勾选
    $currentRadio.prop("checked", false);

    // 核心逻辑：如果取消的是Unconfirmed，自动勾选None
    if ($currentRadio.val() === 'unconfirmed') {
      var $noneRadio = $('#none');
      $noneRadio.prop('checked', true);
      $noneRadio.data('ischecked', true);
    }
  } else {
    // 如果当前未勾选，点击后勾选，同时重置另一个按钮的状态
    $currentRadio.prop("checked", true);
    $('form :radio').not($currentRadio).each(function() {
      $(this).prop('checked', false);
      $(this).data('ischecked', false);
    });
  }

  // 更新当前按钮的状态标记
  $currentRadio.data('ischecked', !currentStatus);
});

关键改动说明 #

1. 取消勾选时的判断：在取消Unconfirmed按钮的分支里，我们专门加了判断，一旦检测到是这个按钮被取消，就立刻把None按钮设为勾选状态，同时更新它的data-ischecked标记，保证状态一致。
2. 勾选时的状态同步：当用户勾选某一个按钮时，自动把另一个按钮的勾选状态和data-ischecked都重置为false，避免出现两个按钮同时“逻辑上勾选”的混乱情况。

这样既保留了你想要的单选按钮二选一特性，又实现了取消Unconfirmed自动回到None的需求～

内容的提问来源于stack exchange，提问作者Elosias