如何判斷CSS單選框是否選中

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

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

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

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

這個(gè)選擇器會(huì)選取所有被選中的my-radio單選框，并應(yīng)用相應(yīng)的樣式。

2、通過(guò)JavaScript判斷

除了CSS選擇器外，我們還可以使用JavaScript來(lái)判斷單選框是否被選中，我們可以獲取單選框的checked屬性，如果值為true，則表示該單選框被選中：

var isChecked = document.querySelector('.my-radio').checked;
if (isChecked) {
  // 單選框被選中
} else {
  // 單選框未被選中
}

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

我們還可以通過(guò)HTML標(biāo)簽來(lái)判斷單選框是否被選中，我們可以使用input標(biāo)簽的type屬性來(lái)指定單選框的類型，并通過(guò)value屬性來(lái)獲取被選中的值：

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

我們可以通過(guò)以下代碼來(lái)判斷哪個(gè)單選框被選中：

var selectedValue = document.querySelector('input[name="gender"]:checked').value;
if (selectedValue === 'male') {
  // 男性單選框被選中
} else if (selectedValue === 'female') {
  // 女性單選框被選中
} else {
  // 沒(méi)有單選框被選中
}

是判斷CSS單選框是否選中的幾種常見(jiàn)方法，希望對(duì)你有所幫助！