问题描述
我有以下代码，该代码允许用户选择一个评级值，并且该代码没有问题。 在第一个选择中，所有星星均为灰色。
但是，如果用户对第二件事进行评分，则它不会保留该值，但会保留以前的黄色星号。
我该如何重置它，以免星星泛黄-我正在寻找Javascript解决方案。
var rating = {} function rate(value) { rating.starValue = Number(value); }
.stars, .stars label::before { display: inline-block; } .stars label:hover, .stars label:hover ~ label { color: #b5cebe; } .stars input { display: none; } .stars { direction: rtl; } .stars label { color: #ccc; } .stars label::before { content: "\\2605"; width: 18px; line-height: 18px; text-align: center; font-size: 50px; padding: 25px; cursor: pointer; } .stars input:checked ~ label { color: #f5b301; }
<div class="stars"> <input type="radio" name="stars-1" id="stars-1-0" value="5" onclick="rate(this.value)"/><label for="stars-1-0"></label><!-- --><input type="radio" name="stars-1" id="stars-1-1" value="4" onclick="rate(this.value)"/><label for="stars-1-1"></label><!-- --><input type="radio" name="stars-1" id="stars-1-2" value="3" onclick="rate(this.value)"/><label for="stars-1-2"></label><!-- --><input type="radio" name="stars-1" id="stars-1-3" value="2" onclick="rate(this.value)"/><label for="stars-1-3"></label><!-- --><input type="radio" name="stars-1" id="stars-1-4" value="1" onclick="rate(this.value)"/><label for="stars-1-4"></label> </div>
编辑：在人们对此投反对票之前（大概是因为他们认为我没有试图自己解决这个问题），我已经尝试了一个多小时，但我遇到的主要问题是我无法确定使用哪个DOM选择器。 由于我已经花了一个多小时来进行研究，所以我没有简洁的方法来放置我尝试过的所有组合
1楼
您需要弄清楚如何重置单选按钮集，即可能有重置按钮，或者可以在选定状态和未选定状态之间切换。 以下是假设发生重置操作的事件而仅重置单选按钮的代码。
var ratings = document.getElementsByName('stars-1');
ratings.forEach(function(element)
{
element.checked=false
})
2楼
你去了:)
querySelectorAll
var rating = {} function rate(value) { rating.starValue = Number(value); } function reset() { var elements = document.querySelectorAll('.stars input[name=stars-1]'); elements.forEach(function(element) { element.checked = false; }); rating = {} }
.stars, .stars label::before { display: inline-block; } .stars label:hover, .stars label:hover ~ label { color: #b5cebe; } .stars input { display: none; } .stars { direction: rtl; } .stars label { color: #ccc; } .stars label::before { content: "\\2605"; width: 18px; line-height: 18px; text-align: center; font-size: 50px; padding: 25px; cursor: pointer; } .stars input:checked ~ label { color: #f5b301; }
<div class="stars"> <input type="radio" name="stars-1" id="stars-1-0" value="5" onclick="rate(this.value)"/><label for="stars-1-0"></label><!-- --><input type="radio" name="stars-1" id="stars-1-1" value="4" onclick="rate(this.value)"/><label for="stars-1-1"></label><!-- --><input type="radio" name="stars-1" id="stars-1-2" value="3" onclick="rate(this.value)"/><label for="stars-1-2"></label><!-- --><input type="radio" name="stars-1" id="stars-1-3" value="2" onclick="rate(this.value)"/><label for="stars-1-3"></label><!-- --><input type="radio" name="stars-1" id="stars-1-4" value="1" onclick="rate(this.value)"/><label for="stars-1-4"></label> </div> <input type='button' onclick='reset()' value='reset'>