HTML單選框代碼詳細闡述

一、單選框的基本概念

單選框，也叫做單選按鈕，是HTML頁面中用來選擇一個選項的一種表單控制項。它只允許用戶在一系列選項中選擇其中一個。比如在問卷中，就可以利用單選框讓用戶從多個答案中選擇一個。

單選框的HTML代碼基本結構如下：

<input type="radio" name="options" value="A" />
<label for="option1">選項A</label>

其中，type屬性表示輸入框的類型為單選框；name屬性表示單選框所處的組別；value屬性表示該單選框的值；label標籤用於顯示單選框的選項文字，for屬性指定了該標籤對應的單選框ID。

二、單選框的屬性詳解

1. name屬性

name屬性為單選框的重要屬性之一，它將同一組單選框關聯在一起。如果沒有指定name屬性，那麼每個單選框都會作為一個獨立的選項來處理。

示例代碼：

<input type="radio" name="options" value="A" />
<label for="option1">選項A</label>
<input type="radio" name="options" value="B" />
<label for="option2">選項B</label>
<input type="radio" name="options" value="C" />
<label for="option3">選項C</label>

上述代碼中，name屬性為options，它將三個單選框關聯在一起。當用戶選擇其中一個單選框時，其他兩個單選框就會被取消選中狀態。

2. value屬性

value屬性指定了每個單選框的值，它在用戶提交表單時會作為表單數據的一部分傳遞給伺服器。

示例代碼：

<input type="radio" name="options" value="A" />
<label for="option1">選項A</label>
<input type="radio" name="options" value="B" />
<label for="option2">選項B</label>
<input type="radio" name="options" value="C" />
<label for="option3">選項C</label>

上述代碼中，value屬性分別為A、B、C，當用戶選擇其中一個單選框並提交表單時，選中的單選框的value值會被作為表單數據的一部分傳遞給伺服器。

3. checked屬性

checked屬性用於指定默認選中的單選框。如果多個單選框都指定了checked屬性，那麼只有最後一個被選中。

示例代碼：

<input type="radio" name="options" value="A" checked />
<label for="option1">選項A</label>
<input type="radio" name="options" value="B" />
<label for="option2">選項B</label>
<input type="radio" name="options" value="C" />
<label for="option3">選項C</label>

上述代碼中，選項A被默認選中。

三、單選框的其他應用

1. 美化單選框

單選框的外觀可以使用CSS進行定製，常用的方式就是使用label標籤來代替原生的單選框。通過設置label標籤的樣式和背景圖片，可以讓單選框變得更美觀。

示例代碼：

<style>
.radio-box {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ddd;
  position: relative;
}
.radio-box input[type="radio"] {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.radio-box label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.radio-box input[type="radio"]:checked ~ label::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<div class="radio-box">
  <input type="radio" name="options" id="option1" value="A">
  <label for="option1">選項A</label>
</div>
<div class="radio-box">
  <input type="radio" name="options" id="option2" value="B">
  <label for="option2">選項B</label>
</div>
<div class="radio-box">
  <input type="radio" name="options" id="option3" value="C">
  <label for="option3">選項C</label>
</div>

上述代碼中，通過設置CSS樣式和背景圖片，使用div標籤代替原生的單選框實現了美化效果。

2. 單選框的聯動效果

單選框也可以實現聯動效果，比如一個單選框的選擇會影響到後面顯示的內容。

示例代碼：

<input type="radio" name="options" value="A" checked />
<label for="option1">選項A</label>
<input type="radio" name="options" value="B" />
<label for="option2">選項B</label>
<input type="radio" name="options" value="C" />
<label for="option3">選項C</label>
<div id="content1">選項A的內容</div>
<div id="content2" style="display: none;">選項B的內容</div>
<div id="content3" style="display: none;">選項C的內容</div>
<script>
    var radio = document.getElementsByName("options");
    var content1 = document.getElementById("content1");
    var content2 = document.getElementById("content2");
    var content3 = document.getElementById("content3");
    for (var i=0; i<radio.length; i++) {
        radio[i].onclick = function() {
            if (this.value == "A") {
                content1.style.display = "block";
                content2.style.display = "none";
                content3.style.display = "none";
            } else if (this.value == "B") {
                content1.style.display = "none";
                content2.style.display = "block";
                content3.style.display = "none";
            } else {
                content1.style.display = "none";
                content2.style.display = "none";
                content3.style.display = "block";
            }
        };
    }
</script>

上述代碼中，利用JavaScript實現了單選框的聯動效果。當用戶選擇不同的選項時，根據不同選項的value值控制顯示相應的內容區域。