从选定的评级标签中读取值答案

【问题标题】：read value from selected rating label从选定的评级标签中读取值
【发布时间】：2019-10-21 15:20:00
【问题描述】：

我有这个 css 纯星级评分系统。

我想从中读取选定的值，并根据我的选择在右侧显示一条消息。

如何使用最小的 js 做到这一点？

.rating {
  width: 208px;
  height: 40px;
  margin: 0 auto;
  padding: 40px 50px;
  border: 1px solid #CCCCCC;
  background: #F9F9F9;
}
.rating label {
  float: right;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.rating label:not(:first-of-type) {
  padding-right: 2px;
}
.rating label:before {
  content: "\2605";
  font-size: 42px;
  color: #CCCCCC;
  line-height: 1;
}
.rating input {
  display: none;
}
.rating input:checked ~ label:before, .rating:not(:checked) > label:hover:before, .rating:not(:checked) > label:hover ~ label:before {
  color: #F9DF4A;
}

<h5>Pure CSS Star Rating</h1>
<div class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1"></label>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

试试这个

 function OnRadioStateChange () {
            var ele = document.getElementsByName('rating');
             for(i = 0; i < ele.length; i++) { 
                if(ele[i].checked) {
             alert("Rating : "+ele[i].value)
             }
                      } 
        }

.rating {
  width: 208px;
  height: 40px;
  margin: 0 auto;
  padding: 40px 50px;
  border: 1px solid #CCCCCC;
  background: #F9F9F9;
}
.rating label {
  float: right;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.rating label:not(:first-of-type) {
  padding-right: 2px;
}
.rating label:before {
  content: "\2605";
  font-size: 42px;
  color: #CCCCCC;
  line-height: 1;
}
.rating input {
  display: none;
}
.rating input:checked ~ label:before, .rating:not(:checked) > label:hover:before, .rating:not(:checked) > label:hover ~ label:before {
  color: #F9DF4A;
}

<h5>Pure CSS Star Rating</h1>
<div class="rating">
    <input type="radio" id="star5" name="rating" value="5" onclick="OnRadioStateChange()"/><label for="star5"></label>
    <input type="radio" id="star4" name="rating" value="4" onclick="OnRadioStateChange()"/><label for="star4"></label>
    <input type="radio" id="star3" name="rating" value="3" onclick="OnRadioStateChange()"/><label for="star3"></label>
    <input type="radio" id="star2" name="rating" value="2" onclick="OnRadioStateChange()"/><label for="star2"></label>
    <input type="radio" id="star1" name="rating" value="1" onclick="OnRadioStateChange()"/><label for="star1"></label>
</div>

【讨论】：

【解决方案2】：

这是我的解决方案，

输入元素有onChange 属性，当输入值改变时触发一个函数。

将onchange="myFunction(5)"添加到每个输入，然后使用以下函数捕获值

function myFunction(val) {
  console.log(val);
  document.getElementById("starval").textContent=val;
}

function myFunction(val) {
  console.log(val);
  document.getElementById("starval").textContent=val;
}

.rating {
  width: 208px;
  height: 40px;
  margin: 0 auto;
  padding: 40px 50px;
  border: 1px solid #CCCCCC;
  background: #F9F9F9;
}

.rating label {
  float: right;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.rating label:not(:first-of-type) {
  padding-right: 2px;
}

.rating label:before {
  content: "\2605";
  font-size: 42px;
  color: #CCCCCC;
  line-height: 1;
}

.rating input {
  display: none;
}

.rating input:checked~label:before,
.rating:not(:checked)>label:hover:before,
.rating:not(:checked)>label:hover~label:before {
  color: #F9DF4A;
}

<h5>Pure CSS Star Rating</h1>
  <div class="rating">
    <input type="radio" id="star5" name="rating" value="5" onchange="myFunction(5)" /><label for="star5"></label>
    <input type="radio" id="star4" name="rating" value="4" onchange="myFunction(4)" /><label for="star4"></label>
    <input type="radio" id="star3" name="rating" value="3" onchange="myFunction(3)" /><label for="star3"></label>
    <input type="radio" id="star2" name="rating" value="2" onchange="myFunction(2)" /><label for="star2"></label>
    <input type="radio" id="star1" name="rating" value="1" onchange="myFunction(1)" /><label for="star1"></label>
  </div>
  
  
  <h1 id="starval"></h1>

【讨论】：