单选按钮（RadioButton）常见用法汇总

单选按钮（RadioButton）是用户界面中常见的一种交互元素，它允许用户从一组互斥的选项中选择一个，以下是单选按钮的常见用法汇总：

1、基本用法

属性/方法	说明
value	设置或获取单选按钮的值
checked	设置或获取单选按钮是否被选中
disabled	设置或获取单选按钮是否禁用
name	设置或获取单选按钮的名称，用于在表单提交时识别
onChange	设置或获取单选按钮值改变时的回调函数

2、单选按钮组

当有多个单选按钮需要表示为一组时，可以使用相同的name属性将它们关联起来，这样，同一时间只能选择一个单选按钮。

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

3、禁用单选按钮

通过设置disabled属性，可以禁用单选按钮，禁用后的单选按钮无法点击，且显示为灰色。

<input type="radio" id="option4" name="choice" value="4" disabled>
<label for="option4">选项4（禁用）</label>

4、单选按钮与表单提交

当用户选择某个单选按钮并提交表单时，该单选按钮的值会作为表单数据的一部分发送到服务器。

<form action="/submit" method="post">
  <input type="radio" id="option5" name="choice" value="5">
  <label for="option5">选项5</label>
  <input type="submit" value="提交">
</form>

5、单选按钮与JavaScript交互

可以使用JavaScript监听单选按钮的change事件，以便在用户更改选择时执行某些操作。

<input type="radio" id="option6" name="choice" value="6">
<label for="option6">选项6</label>
<script>
  document.getElementById("option6").addEventListener("change", function() {
    console.log("选项6被选中");
  });
</script>