讓一個單選按鈕及其標籤在選中時自動更改

我覺得這個解決方案很簡單，但我無法在互聯網上找到它。如果選擇單選按鈕，我需要在單選按鈕及其標籤上顯示邊框。單選按鈕代碼爲例如：讓一個單選按鈕及其標籤在選中時自動更改

<input type="radio" name="sex" class="sex" value="0">Male</input> 
<input type="radio" name="sex" class="sex" value="1">Female</input>

如果選擇了男性選項，則整個單選按鈕和男性標籤將被矩形包圍。如果選擇了女性單選按鈕，則男性單選按鈕上的矩形將消失並更改爲女性單選按鈕。但是這隻需要在CSS中完成。根本沒有JavaScript。這可能嗎？我認爲答案可能與假選擇器有關，如：

.sex {border: 0} 
.sex:checked {border: 1 solid red;}

但是這不起作用。有什麼我做錯了嗎？謝謝。

來源

2015-04-04 Chen Li Yong

檢查這個http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-按鈕/＃下載 – user00000341 2015-04-04 07:01:18

chech這一個幫助http://www.tutorialrepublic.com/faq/how-to-create-custom-radio-buttons-using-css-and-jquery.php – 2015-04-04 07:02:13

輸入不起作用，他們沒有內容，也沒有結束標籤。因此，在您的示例中，「男性」和「女性」這兩個詞不是輸入本身的一部分。

解決的辦法是使用<label>元素放置單詞，並將這些標籤指向具有for屬性的相應輸入。

<input type="radio" name="sex" class="sex" value="0" id="sex0"><label for="sex0">Male</label> 
<input type="radio" name="sex" class="sex" value="1" id="sex1"><label for="sex1">Female</label>

然後你的CSS會是這個樣子：

label {border: 0; padding-left:20px; margin-left:-20px;} 
.sex:checked+label {outline: 1px solid red;}

我用了一個輪廓，而不是一個邊界，以防止迴流的正在單擊時的元素。
請注意標籤上的左填充和負左邊距，以使其顯示單選按鈕位於標籤中。這是必要的，因爲單選按鈕本身對outline屬性沒有很好的響應。

請參閱JSFiddle。

來源

2015-04-04 07:20:46

謝謝！它完美無缺地工作！即使我知道那個標籤，我其實從來沒有使用過標籤。我曾經認爲我把標籤放在輸入標籤內。但是，謝謝你讓我知道我錯了！真棒回答！ – 2015-04-04 09:17:13

如果你不介意使用jQuery，這裏是一個解決方案：https://jsfiddle.net/1h5abbnm/

確保1後添加「PX」，爲{border: 1px solid red;}。直到我做到了，它才適用於我。

類似的問題，你可能會進一步幫助：
- jquery applying css class on select on radio buttons
- How can I check whether a radio button is selected with JavaScript?

來源

2015-04-04 07:50:45 Boris

是的，輸入例子時我很魯莽，幾小時後才意識到它。感謝您的jQuery替代品！ :) – 2015-04-04 09:16:45

讓一個單選按鈕及其標籤在選中時自動更改

回答

相關問題