js让单选框取消选中状态

在JavaScript中，要让单选框（radio button）取消选中状态，可以通过以下几种方法实现：

基础概念

单选框是一种HTML表单元素，允许用户在一组选项中选择一个。每个单选框都属于同一个name属性的组，同一时间只能有一个单选框被选中。

方法一：重置表单

最简单的方法是通过重置整个表单来取消所有单选框的选中状态。

<form id="myForm">
  <input type="radio" name="choice" value="option1"> Option 1<br>
  <input type="radio" name="choice" value="option2"> Option 2<br>
  <input type="radio" name="choice" value="option3"> Option 3<br>
  <button type="button" onclick="resetForm()">Reset</button>
</form>

<script>
function resetForm() {
  document.getElementById('myForm').reset();
}
</script>

方法二：手动设置未选中状态

如果你只想取消特定的单选框，可以手动将其checked属性设置为false。

<input type="radio" id="option1" name="choice" value="option1">
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="option2" value="option2">
<label for="option2">Option 2</label><br>
<button type="button" onclick="uncheckOption()">Uncheck Option 1</button>

<script>
function uncheckOption() {
  document.getElementById('option1').checked = false;
}
</script>

方法三：遍历并取消选中

如果你需要取消一组单选框中的所有选中状态，可以遍历这些单选框并设置它们的checked属性为false。

<input type="radio" name="choice" value="option1"> Option 1<br>
<input type="radio" name="choice" value="option2"> Option 2<br>
<input type="radio" name="choice" value="option3"> Option 3<br>
<button type="button" onclick="uncheckAll()">Uncheck All</button>

<script>
function uncheckAll() {
  var radios = document.getElementsByName('choice');
  for (var i = 0; i < radios.length; i++) {
    radios[i].checked = false;
  }
}
</script>