Question

我希望能够选择多个星级而不重置之前的星级。在下面的链接中，如果您对“价格”进行评级，然后想要评估“估值”，则会重置“价格”。

我将one和two添加到fieldset元素的类中并将其作为目标在CSS中，但是还没有找到使其与我的代码一起使用的方法。谢谢你的帮助。

这是我的代码 http://jsfiddle.net/snewcomer24/zexvtoz1/

.rating {
  float:left;
}

.rating:not(:checked) > input {
  position:absolute;
  top:-9999px;
  clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
  float:right;
  width:1em;
  padding:0 .1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:200%;
  line-height:1.2;
  color:#ddd;
  text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
  content: &#9733;
}

.rating > input:checked ~ label {
  color: #ff7700;
  text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: gold;
  text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating> input:checked + label:hover,
.rating> input:checked + label:hover ~ label,
.rating> input:checked ~ label:hover,
.rating> input:checked ~ label:hover ~ label,
.rating> label:hover ~ input:checked ~ label {
  color: #ea0;
  text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
  position:relative;
  top:2px;
  left:2px;
}

     <fieldset class="rating one">
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>

    <fieldset class="rating two">
<input type="radio" id="star5-1" name="rating" value="5" /><label for="star5-1" title="Rocks!"><span>&#9733</span></label>
<input type="radio" id="star4-1" name="rating" value="4" /><label for="star4-1" title="Pretty good"><span>&#9733</span></label>
<input type="radio" id="star3-1" name="rating" value="3" /><label for="star3-1" title="Meh"><span>&#9733</span></label>
<input type="radio" id="star2-1" name="rating" value="2" /><label for="star2-1" title="Kinda bad"><span>&#9733</span></label>
<input type="radio" id="star1-1" name="rating" value="1" /><label for="star1-1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>

Answer 1

您的两组评分应该有不同的name。

具有相同name属性值的单选按钮位于相同的＆＃34;单选按钮组＆＃34 ;;一次只能选择一个组中的一个单选按钮。

（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input）

只需为每组输入提供不同的name属性即可。 EG：

<fieldset class="rating one">
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
</fieldset>

<fieldset class="rating two">
    <input type="radio" id="star5-1" name="ratingtwo" value="5" /><label for="star5-1" title="Rocks!"><span>&#9733</span></label>
    <input type="radio" id="star4-1" name="ratingtwo" value="4" /><label for="star4-1" title="Pretty good"><span>&#9733</span></label>
    <input type="radio" id="star3-1" name="ratingtwo" value="3" /><label for="star3-1" title="Meh"><span>&#9733</span></label>
    <input type="radio" id="star2-1" name="ratingtwo" value="2" /><label for="star2-1" title="Kinda bad"><span>&#9733</span></label>
    <input type="radio" id="star1-1" name="ratingtwo" value="1" /><label for="star1-1" title="Sucks big time"><span>&#9733</span></label>
</fieldset>

http://jsfiddle.net/moob/zexvtoz1/13/

＆＃13;

.rating {
    float:left;
}
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0, 0, 0, 0);
}
.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating:not(:checked) > label:before {
    content: &#9733;
}
.rating > input:checked ~ label {
    color: #ff7700;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating> input:checked + label:hover, .rating> input:checked + label:hover ~ label, .rating> input:checked ~ label:hover, .rating> input:checked ~ label:hover ~ label, .rating> label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

＆＃13;

<fieldset class="rating one">
        <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
        <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
        <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
        <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
        <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>
    
    <fieldset class="rating two">
        <input type="radio" id="star5-1" name="ratingtwo" value="5" /><label for="star5-1" title="Rocks!"><span>&#9733</span></label>
        <input type="radio" id="star4-1" name="ratingtwo" value="4" /><label for="star4-1" title="Pretty good"><span>&#9733</span></label>
        <input type="radio" id="star3-1" name="ratingtwo" value="3" /><label for="star3-1" title="Meh"><span>&#9733</span></label>
        <input type="radio" id="star2-1" name="ratingtwo" value="2" /><label for="star2-1" title="Kinda bad"><span>&#9733</span></label>
        <input type="radio" id="star1-1" name="ratingtwo" value="1" /><label for="star1-1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>

＆＃13;

CSS可防止星级评级重置多星评级

1 个答案: