如何使用HTML中的單選按鈕控制項功能

單選按鈕（Radio Button）是一種用於HTML表單的基本元素。它允許用戶在一組選項中選擇一個選項。在本文中，我們將從多個方面來介紹如何使用HTML中的單選按鈕控制項功能。

一、使用基本的單選按鈕控制項功能

1、我們可以使用input元素中的”type”屬性指定單選按鈕控制項，使用”name”屬性來指定單選按鈕的名稱，使用”value”屬性來指定具體的選項：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

2、通過設置單選按鈕的”checked”屬性為”checked”，我們可以指定默認被選中的選項。

<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女

二、與標籤label結合使用

1、我們可以使用”label”標籤將單選按鈕與其描述文本聯繫起來：

<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>

2、我們也可以使用”label”標籤的”for”屬性將單選按鈕與其描述文本聯繫起來：

<label for="male">男</label><input type="radio" name="gender" id="male" value="male">
<label for="female">女</label><input type="radio" name="gender" id="female" value="female">

三、單選按鈕的表單驗證

1、我們可以使用”required”屬性來指定單選按鈕為必填欄位：

<input type="radio" name="gender" value="male" required>男
<input type="radio" name="gender" value="female" required>女

2、我們也可以使用JavaScript來對單選按鈕進行表單驗證：

<form onsubmit="return validate()">
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女
  <input type="submit" value="提交">
</form>

<script>
function validate() {
  var radios = document.getElementsByName("gender");
  var checked = false;
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      checked = true;
      break;
    }
  }
  if (!checked) {
    alert("請選擇性別");
    return false;
  }
  return true;
}
</script>

四、單選按鈕的樣式美化

我們可以使用CSS來對單選按鈕的樣式進行美化：

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

input[type="radio"]:checked {
  background-color: #ccc;
}

五、單選按鈕的其他關聯功能

1、我們可以使用JavaScript通過單選按鈕來控制其他元素的顯示或隱藏：

<input type="radio" name="show" onclick="document.getElementById('content').style.display='block'">顯示內容
<input type="radio" name="show" onclick="document.getElementById('content').style.display='none'">隱藏內容
<div id="content" style="display: none">Lorem ipsum dolor sit amet.</div>

2、我們也可以使用單選按鈕來控制表格的排序方式：

<table>
  <thead>
    <tr>
      <th><input type="radio" name="sort" value="name">名稱</th>
      <th><input type="radio" name="sort" value="date">日期</th>
      <th><input type="radio" name="sort" value="size">大小</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>A</td><td>2020-01-01</td><td>10MB</td></tr>
    <tr><td>B</td><td>2020-02-01</td><td>20MB</td></tr>
    <tr><td>C</td><td>2019-12-01</td><td>5MB</td></tr>
  </tbody>
</table>

<script>
var radios = document.getElementsByName("sort");
for (var i = 0; i < radios.length; i++) {
  radios[i].onclick = function () {
    sortTable(this.value);
  }
}

function sortTable(field) {
  // 進行表格的排序操作
}
</script>