<div class="radio">是一個常見的HTML元素類名，用于表示單選框和復(fù)選框。在Web開發(fā)中，單選框和復(fù)選框是常用的表單組件，用于讓用戶在多個選項中選擇一個或多個選項。這篇文章將詳細(xì)討論<div class="radio">類以及其在代碼中的應(yīng)用。
，我們來看一個簡單的例子。在下面的代碼中，我們創(chuàng)建了一個包含兩個單選框的表單。每個單選框都被包裹在一個<label>元素內(nèi)，并使用一個<input type="radio">元素來實現(xiàn)單選功能。這些<input>元素都具有相同的name屬性，從而實現(xiàn)了只能選擇其中一個選項的效果。此外，每個<label>元素都具有一個<span>元素作為選項的文字描述。

<p><form>
<label><input class="radio" type="radio" name="color" value="red"><span>紅色</span></label>
<br>
<label><input class="radio" type="radio" name="color" value="blue"><span>藍(lán)色</span></label>
</form></p>

上述代碼中，每個<input>元素都具有class屬性為"radio"。這樣，我們可以使用CSS來對這些單選框進(jìn)行樣式設(shè)置，以滿足特定的設(shè)計需求。例如，我們可以使用以下CSS代碼來設(shè)置選中的單選框的背景顏色為藍(lán)色：

<p>.radio:checked {
background-color: blue;
}</p>

此外，我們還可以使用JavaScript來操作這些單選框。以下是一個示例代碼，它監(jiān)聽了每個單選框的點擊事件，并在選中時顯示一個提示框：

<p>const radioButtons = document.querySelectorAll('.radio');
radioButtons.forEach(button => {
button.addEventListener('click', () => {
if (button.checked) {
alert(<code>你選擇了${button.value}</code>);
}
});
});</p>

上述代碼中，我們使用JavaScript的querySelectorAll方法來獲取帶有"class"屬性為"radio"的所有元素。然后，我們使用forEach方法遍歷這些元素，并為每個元素添加一個點擊事件監(jiān)聽器。當(dāng)點擊某個單選框時，如果它被選中（即checked屬性為true），則彈出一個提示框顯示所選項的值。
綜上所述，<div class="radio">是一個用于表示單選框和復(fù)選框的HTML類名，它在Web開發(fā)中有著廣泛的應(yīng)用。通過為單選框添加這個類名，我們可以使用CSS來對其進(jìn)行樣式設(shè)置，同時也可以使用JavaScript來操作它們。通過合理地使用<div class="radio">類，我們能夠創(chuàng)建出易于交互和美觀的表單組件。