Question

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

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

如果选择了male选项，整个单选按钮和Male标签将被一个矩形括起来。如果选择了女性单选按钮，则“男性”单选按钮中的矩形将消失并变为“女性”单选按钮。但这只需要在CSS中完成。没有javascript。这可能吗？我认为答案可能与伪选择器有关，例如：

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

但这不起作用。我做错了吗？感谢。

Answer 1

输入不是那样的;他们没有内容，也没有结束标签。所以在你的例子中，单词＆＃34;男＆＃34;和＆＃34;女性＆＃34;不是投入本身的一部分。

解决方案是使用放置单词的<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/

确保添加＆＃34; px＆＃34;在1之后，如在{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?

选中时，单选按钮及其标签会自动更改

2 个答案: