Question

是否可以更改在选择另一个按钮之后尚未选择的单选按钮的样式？

例如，在加载页面时，单选按钮的背景为黑色。

当我单击选项1时，其背景变为绿色。

当我单击选项1时，我还希望选项2的背景也变为红色。

很抱歉，这个问题令人困惑，非常感谢！

input {
  background-color: black;
}

input:checked {
  background-color: green;
}

<div>
  <input type="radio" name="example">
  <label>Option1</label>
</div>

<div>
  <input type="radio" name="example">
  <label>Option2</label>
</div>

Answer 1

只是为了好玩，为了说明它只能用CSS来完成，此示例可以工作，但是我真的不建议这样做，只使用JS解决方案之一。

由于您可以使用+访问下一个兄弟姐妹，或者可以进一步使用~访问下一个兄弟姐妹，因此可以先找到所有单选按钮元素，然后再找到标签，这样您就可以访问标签为“下一个兄弟姐妹”。

使用CSS，您可以将标签定位在正确的位置，甚至给它提供覆盖单选按钮的背景：

.container{
  position: relative;
  display: flex;
  flex-direction: column;
}

.container div{
  width: 200px;
  padding-left: 30px;
  z-index: -1;
}

#in1:checked ~ #txt1{
  background-color: green;
}

#in1:checked ~ #txt2{
  background-color: red;
}


#in2:checked ~ #txt2{
  background-color: green;
}

#in2:checked ~ #txt1{
  background-color: red;
}

.container div{
  background-color: black;
  color: white;
}

#txt1 {
  position: absolute;
  left: 0;
  top: 0;
}

#txt2 {
  position: absolute;
  left: 0;
  top: 1em;
}

<div class="container">
  <input id="in1" type="radio" name="example">
  <input id="in2" type="radio" name="example">
  <div id="txt1">Option 1</div>
  <div id="txt2">Option 2</div>
</div>

Answer 2

您必须执行类似的操作。

$(".radioElement").change(function(){
   $(".input").addClass("inputSelectedRemoved");
   if($(this).is(':checked')){
    $(this).parent().addClass("inputSelected");
    $(this).parent().removeClass("inputSelectedRemoved");
   }   
});

.input {
    background-color: black;
    color:white;
    }

.inputSelected{
    background-color: green;
    color:white;
}

.inputSelectedRemoved{
    background-color: red;
    color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input">
    <input type="radio" name="example" value="Option 1" class="radioElement">
    <label>Option1</label>
    </div>

    <div class="input">
    <input type="radio" name="example" value="Option 2" class="radioElement">
    <label>Option2</label>
    </div>

Answer 3

我认为是这样的：我添加了一个onclick属性

    <div>
    <input type="radio" name="example" onclick="document.body.style.backgroundColor = 'green'">
    <label>Option1</label>
    </div>

    <div>
    <input type="radio" name="example" onclick="document.body.style.backgroundColor = 'red'">
    <label>Option2</label>
    </div>

我希望这对您有帮助

CSS-未选中时单选按钮样式更改

3 个答案: