帶有複選框和PHP後端的星級評分系統

Question

我想用複選框在html中製作星級評分系統。當一個複選框被選中時，前面的選項被選中，其他選項被取消選中。

結果將被髮送到我的php代碼後端。

這裏是我當前的HTML：

<span class="star-rating"> 
    <!--RADIO 1--> 
    <input type='checkbox' class="radio_item" value="1" name="item" id="radio1"> 
     <label class="label_item" for="radio1"> <img src="label.png" style="width:30px;height:28px"> </label> 

    <!--RADIO 2--> 
    <input type='checkbox' class="radio_item" value="2" name="item2" id="radio2"> 
    <label class="label_item" for="radio2"> <img src="label.png" style="width:30px;height:28px"> </label> 

     <!--RADIO 3--> 
    <input type='checkbox' class="radio_item" value="3" name="item3" id="radio3"> 
    <label class="label_item" for="radio3"> <img src="label.png" style="width:30px;height:28px"> </label> 


     <!--RADIO 4--> 
    <input type='checkbox' class="radio_item" value="4" name="item4" id="radio4"> 
    <label class="label_item" for="radio4"> <img src="label.png" style="width:30px;height:28px"> </label> 

     <!--RADIO 5--> 
    <input type='checkbox' class="radio_item" value="5" name="item5" id="radio5"> 
    <label class="label_item" for="radio5"> <img src="label.png" style="width:30px;height:28px"> </label> 
</span> 

Answer 1

在你的HTML包括jQuery和你想要的這個簡單的JavaScript代碼可能會做而已。

$('.star-rating input').click(function(){ 
 
    starvalue = $(this).attr('value'); 
 
    
 
    // iterate through the checkboxes and check those with values lower than or equal to the one you selected. Uncheck any other. 
 
    for(i=0; i<=5; i++){ 
 
     if (i <= starvalue){ 
 
      $("#radio" + i).prop('checked', true); 
 
     } else { 
 
      $("#radio" + i).prop('checked', false); 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="star-rating"> 
 
    <!--RADIO 1--> 
 
    <input type='checkbox' class="radio_item" value="1" name="item" id="radio1"> 
 
     <label class="label_item" for="radio1"> &#9734 </label> 
 

 
    <!--RADIO 2--> 
 
    <input type='checkbox' class="radio_item" value="2" name="item2" id="radio2"> 
 
    <label class="label_item" for="radio2"> &#9734 </label> 
 

 
     <!--RADIO 3--> 
 
    <input type='checkbox' class="radio_item" value="3" name="item3" id="radio3"> 
 
    <label class="label_item" for="radio3"> &#9734 </label> 
 

 

 
     <!--RADIO 4--> 
 
    <input type='checkbox' class="radio_item" value="4" name="item4" id="radio4"> 
 
    <label class="label_item" for="radio4"> &#9734 </label> 
 

 
     <!--RADIO 5--> 
 
    <input type='checkbox' class="radio_item" value="5" name="item5" id="radio5"> 
 
    <label class="label_item" for="radio5"> &#9734 </label> 
 
</span>

觀測值：HTML代碼是你的一樣。我剛剛取代星星圖像，因爲鏈接被破壞。

Obs2：當你發佈到你的PHP，你會收到所有檢查輸入。你的php代碼必須非常聰明，並且要獲得最高的價值。這應該不難。

Obs3：星星應該表現爲單選按鈕而不是複選框。來自Obs2的解決方法意味着您的後端代碼對界面上發生的事情有太多的瞭解。這是一個更先進的提示，但將來要考慮這一點。

EXTRA

要在你的應用程序的代碼，你有一些選擇：

OPTION 1（jQuery的來自谷歌的CDN和script標籤的JavaScript代碼）

將這個在您的html中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
$('.star-rating input').click(function(){ 
     starvalue = $(this).attr('value'); 

     // iterate through the checkboxes and check those with values lower than or equal to the one you selected. Uncheck any other. 
     for(i=0; i<=5; i++){ 
      if (i <= starvalue){ 
       $("#radio" + i).prop('checked', true); 
      } else { 
       $("#radio" + i).prop('checked', false); 
      } 
     } 
    }); 
</script> 

選項2（更好：jQuery從CDN和JavaScript文件包含在PHP中）：

包括上面的jQuery，並將JavaScript代碼放入文件：star_rating.js，然後用php include命令包含該文件。