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

小编典典

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

css

在页面上，他们具有以下代码：

<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>

据我所知，这只是一个清单。我如何将其集成到表单中，以便星级评分中的信息可以提交到数据库中。我当前的表单代码如下：

 <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">

阅读 348

2020-05-16

共1个答案

小编典典

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

我创建了一个变量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 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>

2020-05-16