如何判斷CSS單選框是否選中狀態(tài)

在CSS中，我們可以通過(guò)一些方法來(lái)判斷單選框是否被選中，以下是一些常見(jiàn)的判斷方式：

1、通過(guò)CSS選擇器判斷

我們可以使用CSS選擇器來(lái)選取被選中的單選框，假設(shè)我們的單選框有一個(gè)類(lèi)名my-radio，那么我們可以使用以下CSS選擇器來(lái)選取被選中的單選框：

.my-radio:checked {
  /* 樣式 */
}

上述代碼中，:checked是一個(gè)偽類(lèi)選擇器，用于選取被選中的單選框，我們可以在{}中添加樣式，以改變被選中單選框的外觀。

2、通過(guò)JavaScript判斷

除了CSS選擇器外，我們還可以通過(guò)JavaScript來(lái)判斷單選框是否被選中，以下是一個(gè)簡(jiǎn)單的示例：

var myRadio = document.querySelector('.my-radio');
if (myRadio.checked) {
  console.log("單選框已被選中");
} else {
  console.log("單選框未被選中");
}

上述代碼中，我們首先通過(guò)document.querySelector方法獲取了類(lèi)名為my-radio的單選框元素，我們通過(guò)checked屬性來(lái)判斷該單選框是否被選中，如果被選中，則輸出"單選框已被選中"；否則，輸出"單選框未被選中"。

3、通過(guò)HTML標(biāo)簽判斷

除了上述兩種方法外，我們還可以通過(guò)HTML標(biāo)簽來(lái)判斷單選框是否被選中，在HTML中，我們可以使用checked屬性來(lái)設(shè)置單選框的選中狀態(tài)。

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

上述代碼中，***個(gè)單選框的checked屬性為true，表示該單選框已被選中，而第二個(gè)單選框的checked屬性為false，表示該單選框未被選中，我們可以通過(guò)JavaScript或CSS來(lái)獲取這些值，并判斷單選框的選中狀態(tài)。