带有复选框和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命令包含该文件。