将CSS星级评级集成到HTML表单中 [英] Integrating CSS star rating into an HTML form

问题描述

我在线上看过一个教程 - http://www.htmldrive.net / items / show / 402 / CSS-Star-Rating-System - 用于制作CSS星级评分系统。

I've seen a tutorial online - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System - for making a CSS star rating system.

在页面上，他们拥有此代码：

On the page they have this code:

<ul class="rating">
<li><a href="#" title="1 Star">1</a></li>

<li><a href="#" title="2 Stars">2</a></li>

<li><a href="#" title="3 Stars">3</a></li>

<li><a href="#" title="4 Stars">4</a></li>

<li><a href="#" title="5 Stars">5</a></li>
</ul>

从我可以知道，这只是一个列表。我如何将它整合到我的表单中，以便来自星级的信息可以提交到数据库。我当前的表单代码如下：

From what I can tell, this is just a list. How would I integrate it into my form, so that the information from the star rating can be submitted to a database. My current code for the form is below:

    <p>Quality</p>
   <input type="radio" name="ratingquality" value="1"> 
   <input type="radio" name="ratingquality" value="2"> 
   <input type="radio" name="ratingquality" value="3"> 
   <input type="radio" name="ratingquality" value="4"> 
   <input type="radio" name="ratingquality" value="5"> 

推荐答案

这是很容易使用，只是复制粘贴代码。您可以在后台使用您自己的星图片。

This is very easy to use, just copy-paste the code. You can use your own star image in background.

我已经创建了一个变量 var userRating 。您可以使用此变量从星星中获取价值。

i have created a variable var userRating. you can use this variable to get value from stars.

享受！ ：）

CSS

.rating {
    float:left;
    width:300px;
}
.rating span { float:right; position:relative; }
.rating span input {
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
}
.rating span label {
    display:inline-block;
    width:30px;
    height:30px;
    text-align:center;
    color:#FFF;
    background:#ccc;
    font-size:30px;
    margin-right:2px;
    line-height:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
    background:#F90;
    color:#FFF;
}

HTML

<div class="rating">
    <span><input type="radio" name="rating" id="str5" value="5"><label for="str5"></label></span>
    <span><input type="radio" name="rating" id="str4" value="4"><label for="str4"></label></span>
    <span><input type="radio" name="rating" id="str3" value="3"><label for="str3"></label></span>
    <span><input type="radio" name="rating" id="str2" value="2"><label for="str2"></label></span>
    <span><input type="radio" name="rating" id="str1" value="1"><label for="str1"></label></span>
</div>

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//  Check Radio-box
    $(".rating input:radio").attr("checked", false);
    $('.rating input').click(function () {
        $(".rating span").removeClass('checked');
        $(this).parent().addClass('checked');
    });

    $('input:radio').change(
    function(){
        var userRating = this.value;
        alert(userRating);
    }); 
});
</script>

这篇关于将CSS星级评级集成到HTML表单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！