html - 选项更改时单选按钮 "Checked=checked"不更改

Question

我已经创建了一个基本的 2 单选按钮表单，如下面的示例所示。

观察浏览器渲染，我们看到元素 1 被选中。我们检查元素 1 和元素 2。

当我点击元素 2 时，我希望元素 1 的 checked=checked 被删除。我希望元素 2 收到属性 checked=checked。

这不是预期的行为吗？

<div>
    <span>Item 1</span>
    <input type="radio" name="radio1" id="radio1" checked="checked" />
</div>

<div>
    <span>Item 2</span>
    <input type="radio" name="radio1" class="checkbox" id="radio2" />
</div>

http://jsfiddle.net/chrimbus/ZTE7R/1/

Answer 1

checked 属性指定默认选中的单选按钮，而不是当前选中的单选按钮。

查看示例代码:

function setChecked() {
  document.getElementById('x1').removeAttribute('checked');
  document.getElementById('x2').setAttribute('checked', 'checked');
}

document.querySelector('[type=button]').addEventListener('click', setChecked);

<form>
  <input name="x" type="radio" id="x1" checked>
  <input name="x" type="radio" id="x2">
  <button type="button">Switch</button>
  <button type="reset">Reset</button>
</form>

单击第二个单选按钮，然后单击重置。然后再次单击第二个单选按钮，然后单击“切换”，然后单击“重置”。

选中的属性将给出单选按钮的当前选中状态。