星星（单选按钮）在选中时不会改变颜色

Question

我有两个使用radio按钮的星级评分系统。当用户点击星星时，该星星及其后面的所有星星都应该变成黄色。您可以在我的CSS代码中的注释中看到这一点（例如/* show gold star when clicked */）。

我认为它与可能出现的::before元素有关？但我对此并不完全确定：

＆＃13;

＆＃13;

.rating {
  border: none;
  float: left;
}

.rating {
  margin: 0;
  padding: 0;
}

.rating input {
  display: none;
}

.rating label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating .half:before {
  content: "\f089";
  position: absolute;
}

.rating label {
  color: #ddd;
  float: right;
}

.rating input:checked~label,

/* show gold star when clicked */

.rating:not(:checked) label:hover,

/* hover current star */

.rating:not(:checked) label:hover~label {
  color: #FFD700;
}


/* hover previous stars in list */

.rating input:checked+label:hover,

/* hover current star when changing rating */

.rating input:checked~label:hover,
.rating label:hover~input:checked~label,

/* lighten current selection */

.rating input:checked~label:hover~label {
  color: #FFED85;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<fieldset class="rating">
  <label class="full" title="Excellent">
   <input type="radio" name="rating" value="5" />
   </label>
  <label class="half" title="Good">
   <input type="radio" name="rating" value="4.5" />
   </label>
  <label class="full" title="Pretty Good">
   <input type="radio" name="rating" value="4" />
   </label>
  <label class="half" title="Nice">
   <input type="radio" name="rating" value="3.5" />
   </label>
  <label class="full" title="Ok">
   <input type="radio" name="rating" value="3" />
   </label>
  <label class="half" title="Kinda Bad">
   <input type="radio" name="rating" value="2.5" />
   </label>
  <label class="full" title="Bad">
   <input type="radio" name="rating" value="2" />
   </label>
  <label class="half" title="Meh">
   <input type="radio" name="rating" value="1.5" />
   </label>
  <label class="full" title="Umm">
   <input type="radio" name="rating" value="1" />
   </label>
  <label class="half" title="Worst">
   <input type="radio" name="rating" value="0.5" />
   </label>
</fieldset>

<br><br>

<fieldset class="rating">
  <label class="full" title="Excellent">
   <input type="radio" name="rating" value="5" />
   </label>
  <label class="half" title="Good">
   <input type="radio" name="rating" value="4.5" />
   </label>
  <label class="full" title="Pretty Good">
   <input type="radio" name="rating" value="4" />
   </label>
  <label class="half" title="Nice">
   <input type="radio" name="rating" value="3.5" />
   </label>
  <label class="full" title="Ok">
   <input type="radio" name="rating" value="3" />
   </label>
  <label class="half" title="Kinda Bad">
   <input type="radio" name="rating" value="2.5" />
   </label>
  <label class="full" title="Bad">
   <input type="radio" name="rating" value="2" />
   </label>
  <label class="half" title="Meh">
   <input type="radio" name="rating" value="1.5" />
   </label>
  <label class="full" title="Umm">
   <input type="radio" name="rating" value="1" />
   </label>
  <label class="half" title="Worst">
   <input type="radio" name="rating" value="0.5" />
   </label>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如上所述，这在纯CSS中是可以实现的，但它确实需要添加ID和属性，并重新构建HTML以使标签和单选按钮成为兄弟姐妹，如下所示：

＆＃13;

＆＃13;

$(document).on('click', 'fieldset label', function () {
    var that = this;
    setTimeout(function() {
    console.log('hidden val=',$(that).parent().find("input[type='hidden']").val());
    console.log('checked val=',$(that).parent().find("input[type='radio']:checked").val());
    },1);
});

＆＃13;

.rating {
  border: none;
  float: left;
}

.rating {
  margin: 0;
  padding: 0;
}

.rating input {
  display: none;
}

.rating label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating .half:before {
  content: "\f089";
  position: absolute;
}

.rating label {
  color: #ddd;
  float: right;
}

.rating input:checked~label,

/* show gold star when clicked */

.rating:not(:checked) label:hover,

/* hover current star */

.rating:not(:checked) label:hover~label {
  color: #FFD700;
}


/* hover previous stars in list */

.rating input:checked+label:hover,

/* hover current star when changing rating */

.rating input:checked~label:hover,
.rating label:hover~input:checked~label,

/* lighten current selection */

.rating input:checked~label:hover~label {
  color: #FFED85;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<fieldset class="rating">
<input type="hidden" value="1">
  <input type="radio" id="5star" name="rating" value="5" />
  <label class="full" for="5star" title="Excellent"></label>

  <input type="radio" id="4halfstar" name="rating" value="4.5" />
  <label class="half" for="4halfstar" title="Good"></label>

  <input type="radio" id="4star" name="rating" value="4" />
  <label class="full" for="4star" title="Pretty good"></label>

  <input type="radio" id="3halfstar" name="rating" value="3.5" />
  <label class="half" for="3halfstar" title="Nice"></label>

  <input type="radio" id="3star" name="rating" value="3" />
  <label class="full" for="3star" title="Ok"></label>

  <input type="radio" id="2halfstar" name="rating" value="2.5" />
  <label class="half" for="2halfstar" title="Kinda bad"></label>

  <input type="radio" id="2star" name="rating" value="2" />
  <label class="full" for="2star" title="Bad"></label>

  <input type="radio" id="1halfstar" name="rating" value="1.5" />
  <label class="half" for="1halfstar" title="Meh"></label>

  <input type="radio" id="1star" name="rating" value="1" />
  <label class="full" for="1star" title="Umm"></label>

  <input type="radio" id="halfstar" name="rating" value="0.5" />
  <label class="half" for="halfstar" title="Worst"></label>

</fieldset>

<br><br>

<fieldset class="rating">
<input type="hidden" value="2">
  <input type="radio" id="5star2" name="rating2" value="5" />
  <label class="full" for="5star2" title="Excellent"></label>

  <input type="radio" id="4halfstar2" name="rating2" value="4.5" />
  <label class="half" for="4halfstar2" title="Good"></label>

  <input type="radio" id="4star2" name="rating2" value="4" />
  <label class="full" for="4star2" title="Pretty good"></label>

  <input type="radio" id="3halfstar2" name="rating2" value="3.5" />
  <label class="half" for="3halfstar2" title="Nice"></label>

  <input type="radio" id="3star2" name="rating2" value="3" />
  <label class="full" for="3star2" title="Ok"></label>

  <input type="radio" id="2halfstar2" name="rating2" value="2.5" />
  <label class="half" for="2halfstar2" title="Kinda bad"></label>

  <input type="radio" id="2star2" name="rating2" value="2" />
  <label class="full" for="2star2" title="Bad"></label>

  <input type="radio" id="1halfstar2" name="rating2" value="1.5" />
  <label class="half" for="1halfstar2" title="Meh"></label>

  <input type="radio" id="1star2" name="rating2" value="1" />
  <label class="full" for="1star2" title="Umm"></label>

  <input type="radio" id="halfstar2" name="rating2" value="0.5" />
  <label class="half" for="halfstar2" title="Worst"></label>

</fieldset>

＆＃13;

＆＃13;

＆＃13;