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

Question

I want to make a star rating system in html with checkboxes. When a checkbox is checked, the previous are checked and the others are unchecked.

The result will be POSTed to my php code backend.

Here's my current 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

Include Jquery in your html and this simple javascript code might do just what you want.

$('.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: The html code is the same as yours. I've just replaced the images by stars as the links were broken.

Obs2: When you post this to your php, you will receive all checked inputs. Your php code will have to be smart and take the highest value it receives. This should not be difficult.

Obs3: The stars should behave as radio-buttons and not checkboxes. The workaround from Obs2 means that your backend code has too much knowledge of what is happening on the interface. This is a more advanced tip, but take that in consideration in the future.

EXTRA

To include this code in your app, you have some options:

OPTION 1 (jQuery from google CDN and javascript code on script tag)

Put this in your 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>

OPTION 2 (better: jQuery from CDN and javascript file included with php):

Include jQuery as above and put the javascript code in a file: star_rating.js, then include that file with php include command.

</div>