让一个单选按钮及其标签在选中时自动更改

Question

我觉得这个解决方案很简单，但我无法在互联网上找到它。如果选择单选按钮，我需要在单选按钮及其标签上显示边框。单选按钮代码为例如：

<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;} 

但是这不起作用。有什么我做错了吗？谢谢。

Answer 1

输入不起作用，他们没有内容，也没有结束标签。因此，在您的示例中，“男性”和“女性”这两个词不是输入本身的一部分。

解决的办法是使用<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。

Answer 2

如果你不介意使用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?