带复选框和 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>

Obs：html 代码与您的代码相同。由于链接已损坏，我刚刚用星星替换了图片。

Obs2：当您 post 将此发送到 php 时，您将收到所有已检查的输入。您的 php 代码必须很聪明，并取其接收到的最高值。这个应该不难。

Obs3：星星应该表现为单选按钮而不是复选框。 Obs2 的解决方法意味着您的后端代码对界面上发生的事情有太多了解。这是一个更高级的技巧，但请在以后考虑。

额外

要在您的应用中包含此代码，您有以下几种选择：

选项 1（jQuery 来自 google CDN 和 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（更好：来自 CDN 的 jQuery 和 php 中包含的 javascript 文件）：

如上所述包含 jQuery 并将 javascript 代码放入文件中：star_rating.js，然后使用 php include 命令包含该文件。

带复选框和 PHP 后端的星级评分系统

Star Rating System With Checkboxes and PHP backend

html

php

checkbox