Question

以下是我正在寻找的代码：

http://jsfiddle.net/bumbu/rXWpy/5/light/

但是，如果我尝试将html代码放两次：

<div class="stars">
  <div class="rating" style="width:65%"></div>
  <input type="radio" name="rating" id="star5" value="5">
  <label for="star5"></label>
  <input type="radio" name="rating" id="star4" value="4">
  <label for="star4"></label>
  <input type="radio" name="rating" id="star3" value="3">
  <label for="star3"></label>
  <input type="radio" name="rating" id="star2" value="2">
  <label for="star2"></label>
  <input type="radio" name="rating" id="star1" value="1">
  <label for="star1"></label>
</div>
 <div class="stars">
  <div class="rating" style="width:35%"></div>
  <input type="radio" name="rating" id="star5" value="5">
  <label for="star5"></label>
  <input type="radio" name="rating" id="star4" value="4">
  <label for="star4"></label>
  <input type="radio" name="rating" id="star3" value="3">
  <label for="star3"></label>
  <input type="radio" name="rating" id="star2" value="2">
  <label for="star2"></label>
  <input type="radio" name="rating" id="star1" value="1">
  <label for="star1"></label>
</div>

然后，两排恒星依赖。如果我换一个，另一个也会改变。我怎样才能使它们独立？

谢谢你放纵，我开始=）

Answer 1

为两组提供不同的名称

他们目前都有name="rating"

将第二组更改为其他内容，例如name="rating2"

Answer 2

您必须更改无线电的名称和ID。和标签。喜欢这个

<div class="stars">
    <div class="rating" style="width:65%"></div>
    <input type="radio" name="rating" id="star5" value="5">
    <label for="star5"></label>
    <input type="radio" name="rating" id="star4" value="4">
    <label for="star4"></label>
    <input type="radio" name="rating" id="star3" value="3">
    <label for="star3"></label>
    <input type="radio" name="rating" id="star2" value="2">
    <label for="star2"></label>
    <input type="radio" name="rating" id="star1" value="1">
    <label for="star1"></label>
</div>
<div class="stars">
    <div class="rating" style="width:65%"></div>
    <input type="radio" name="rating_2" id="star5_2" value="5">
    <label for="star5_2"></label>
    <input type="radio" name="rating_2" id="star4_2" value="4">
    <label for="star4_2"></label>
    <input type="radio" name="rating_2" id="star3_2" value="3">
    <label for="star3_2"></label>
    <input type="radio" name="rating_2" id="star2_2" value="2">
    <label for="star2_2"></label>
    <input type="radio" name="rating_2" id="star1_2" value="1">
    <label for="star1_2"></label>
</div>

css中的星级排名（众多标准）

2 个答案: