js radio 设置未选中

在JavaScript中，<input type="radio"> 元素用于创建单选按钮，允许用户在一组选项中选择一个。如果你想要设置一个单选按钮为未选中状态，可以通过以下几种方式实现：

基础概念

单选按钮（Radio Button）：是一种用户界面元素，允许用户在一组互斥的选项中选择一个。
选中状态：通过设置 checked 属性来控制单选按钮是否被选中。

类型与应用场景

类型：通常用于表单中，特别是在需要用户做出单一选择的场景。
应用场景：性别选择、选项偏好设置、问卷调查等。

设置未选中的方法

方法一：移除 `checked` 属性

如果你之前设置了某个单选按钮为选中状态，可以通过移除 checked 属性来使其变为未选中状态。

<input type="radio" id="option1" name="choice" value="1">
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="choice" value="2">
<label for="option2">Option 2</label><br>
<input type="radio" id="option3" name="choice" value="3" checked>
<label for="option3">Option 3</label><br>

<script>
  // 移除 option3 的 checked 属性
  document.getElementById('option3').removeAttribute('checked');
</script>

方法二：设置 `checked` 属性为 `false`

你也可以直接将 checked 属性设置为 false。

<input type="radio" id="option1" name="choice" value="1">
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="choice" value="2">
<label for="option2">Option 2</label><br>
<input type="radio" id="option3" name="choice" value="3" checked>
<label for="option3">Option 3</label><br>

<script>
  // 设置 option3 的 checked 属性为 false
  document.getElementById('option3').checked = false;
</script>

遇到问题及解决方法

问题：单选按钮无法取消选中状态

原因：可能是由于JavaScript代码执行顺序问题，或者DOM元素未正确加载。 解决方法：

确保JavaScript代码在DOM完全加载后执行。
使用事件监听器确保在适当的时机修改单选按钮的状态。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 确保DOM加载完毕后再执行
    document.getElementById('option3').checked = false;
  });
</script>

通过上述方法，你可以有效地管理和控制单选按钮的选中状态，确保用户界面行为符合预期。