检查后更改单选按钮根本不起作用

Question

我想做一个单选按钮在被选中后会改变颜色的小测验。我创建了以下示例，但点击后并未按预期更改背景。

HTML:

<div id="quiz">

      <input name="question_id" value="2" type="hidden">
      <ul class="list-inline">


            <label for="id_answers_0"><input id="id_answers_0" name="answers" value="5" type="radio"> None</label>



            <label for="id_answers_1"><input id="id_answers_1" name="answers" value="6" type="radio"> A little</label>



            <label for="id_answers_2"><input id="id_answers_2" name="answers" value="7" type="radio"> A lot</label>



            <label for="id_answers_3"><input id="id_answers_3" name="answers" value="8" type="radio"> Enormous</label>


      </ul>
</div>

CSS:

#quiz {
    margin:4px;
    text-align:center;
    float:left;
    font-size: 16px;
    padding:13px 0px;
    width : 100%;


}

#quiz label {
    float:left;
    width:170px;
    padding : 5%;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;

}

#quiz label:hover {
    background-color: green;
    color: white;
}

input[type="radio"]:checked+label{ background:black; }  


#quiz label input {
    position:absolute;
    top:-20px;

}

Jsfiddle 示例： http://jsfiddle.net/n5xb4b9v/

干杯

Answer 1

这是一个工作示例，http://jsfiddle.net/n5xb4b9v/3/

我把html改成了这个

<div id="quiz">

      <input name="question_id" value="2" type="hidden">
      <ul class="list-inline">


            <input id="id_answers_0" name="answers" value="5" type="radio"><label for="id_answers_0"> None</label>



           <input id="id_answers_1" name="answers" value="6" type="radio"><label for="id_answers_1"> A little</label>



            <input id="id_answers_2" name="answers" value="7" type="radio"><label for="id_answers_2"> A lot</label>



            <input id="id_answers_3" name="answers" value="8" type="radio"><label for="id_answers_3"> Enormous</label>


      </ul>
</div>

并将此添加到您的 css

input[type=radio] {
   display: none;
 }
#quiz input[type="radio"]:checked + label {
   background-color: black;
 }

Answer 2

对不起，伙计，我没有对齐和评论代码你的主要错误 - + 在 css + 选择器意味着：

标签 1 + 标签 2 { 样式 }

这意味着，仅当此标签放置在标签 1（而非子标签）之后时，标签 2 才会设置样式

<div id="quiz">
  <input name="question_id" value="2" type="hidden">
  <ul class="list-inline">  
       <input id="id_answers_0" name="answers" value="5" type="radio">   
         <label for="id_answers_0">None</label>

         <input id="id_answers_1" name="answers" value="6" type="radio">
         <label for="id_answers_1"> A little</label>

         <input id="id_answers_2" name="answers" value="7" type="radio">
         <label for="id_answers_2"> A lot</label>

         <input id="id_answers_3" name="answers" value="8" type="radio">
         <label for="id_answers_3"> Enormous</label>


  </ul>
</div>

http://jsfiddle.net/014kpxpz/

检查后更改单选按钮根本不起作用

Change of radio button after checking does not work at all

html

css

radio-button

checked