将CSS星级评定集成到HTML表单中

将CSS星级评定集成到HTML表单中

这很容易使用，只需复制粘贴代码即可。您可以在背景中使用自己的星形图像。

我创建了一个变量

var userRating

。您可以使用此变量从星级中获取价值。

请享用！！:)

$(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);    });});.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;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div >    <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>