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：当你将它发布到你的php时，你将收到所有选中的输入。你的PHP代码必须是智能的，并采取它收到的最高价值。这应该不难。

Obs3：星星的行为应该是单选按钮，而不是复选框。 Obs2的解决方法意味着您的后端代码对接口上发生的事情有太多了解。这是一个更高级的提示，但将来会考虑这一点。

<强> EXTRA

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

选项1 （来自google CDN的jQuery和脚本代码上的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后端的星级评级系统

1 个答案: