栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/465147.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号