1つのラジオフォームが別のラジオフォームを確認しないようにする方法

Question

私は純粋なCSSの星評価システムを見つけましたが、与えられたコードではページごとに1つのスターシステムしか使用できません。私はクラス名を変更しようとしましたが、残念なことに2番目の星評価フォームは、最初の星評価フォームを押したときにチェックします。これを回避する方法はありますか？

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

.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; 
} 

/***** CSS Magic to Highlight Stars on Hover *****/ 

.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; } 

あなたは、このようにHTML

<form class="form-class" id="starform">    
    <fieldset class="rating"> 
     <input type="radio" id="star2" name="rating" value="2"/> 
     <label class="full" for="star2" title="2 stars"></label> 

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

<form class="form-class" id="starformtwo">    
     <fieldset class="ratingtwo"> 
      <input type="radio" id="star2-2" name="ratingtwo" value="2"/> 
      <label class="full" for="star2-2" title="2 stars"></label> 

      <input type="radio" id="star1-2" name="ratingtwo" value="1"/> 
      <label class="full" for="star1-2" title="1 star"></label> 
     </fieldset> 
    </form> 

Answer 1

を意味していますか？

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

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

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

 
.ratings > label { 
 
    color: #ddd; 
 
float: right; 
 
} 
 

 
/***** CSS Magic to Highlight Stars on Hover *****/ 
 

 
.ratings > input:checked ~ label, /* show gold star when clicked */ 
 
.ratings:not(:checked) > label:hover, /* hover current star */ 
 
.ratings:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */ 
 

 
.ratings > input:checked + label:hover, /* hover current star when changing rating */ 
 
.ratings > input:checked ~ label:hover, 
 
.ratings > label:hover ~ input:checked ~ label, /* lighten current selection */ 
 
.ratings > input:checked ~ label:hover ~ label { color: #FFED85; } 
 

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

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

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

 
.ratingtwo > label { 
 
    color: #ddd; 
 
float: right; 
 
} 
 

 
/***** CSS Magic to Highlight Stars on Hover *****/ 
 

 
.ratingtwo > input:checked ~ label, /* show gold star when clicked */ 
 
.ratingtwo:not(:checked) > label:hover, /* hover current star */ 
 
.ratingtwo:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */ 
 

 
.ratingstwo > input:checked + label:hover, /* hover current star when changing rating */ 
 
.ratingstwo > input:checked ~ label:hover, 
 
.ratingtwo > label:hover ~ input:checked ~ label, /* lighten current selection */ 
 
.ratingtwo > input:checked ~ label:hover ~ label { color: #FFED85; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<form class="form-class" id="starform">    
 
    <fieldset class="ratings"> 
 
     <input type="radio" id="star2" name="rating" value="2"/> 
 
     <label class="full" for="star2" title="2 stars"></label> 
 

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

 
<form class="form-class" id="starformtwo">    
 
     <fieldset class="ratingtwo"> 
 
      <input type="radio" id="star2-2" name="ratingtwo" value="2"/> 
 
      <label class="full" for="star2-2" title="2 stars"></label> 
 

 
      <input type="radio" id="star1-2" name="ratingtwo" value="1"/> 
 
      <label class="full" for="star1-2" title="1 star"></label> 
 
     </fieldset> 
 
    </form>

それともjsfiddleに行くことができます。https://jsfiddle.net/rnpow2yz/

希望このコードの動作を。