昨天发布了一个星星打分功能，今天再来分享一个，废话不多说上代码
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>评价</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
$(document).ready(function(){
//星级评分
$("form p span.radio label.radio").click(function(){
$(this).parent("span.radio").css("background-position-y",-($(this).index()*19)+"px");
});
});
</script>
<style>
*{ margin:0; padding:0;}
form p{ display:block; overflow:hidden; padding:10px 20px;}
form p label{ display:block; height:36px; line-height:36px; color:#444; font-size:14px; float:left;}
form p span.radio{ display:block; 150px; height:19px; background:url(images/111.jpg) left 0px no-repeat; float:left; margin:8px 0 0;}
form p input.radio{ display:none;}
form p label.radio{ 20%; height:100%; margin:0; cursor:pointer;}
form input.btn{ display:block; 210px; height:36px; line-height:36px; *line-height:normal; color:#fff; font-size:15px; background:#ffb81f; border:0; border-radius:6px; cursor:pointer; float:left; margin-top:10px;}
</style>
<body>
<form>
<p>
<label>服务态度：</label>
<span class="radio">
<input class="radio" type="radio" name="star1" value="0" checked />
<label class="radio" for="star11"></label>
<label class="radio" for="star12"></label>
<label class="radio" for="star13"></label>
<label class="radio" for="star14"></label>
<label class="radio" for="star15"></label>
<input id="star11" class="radio" type="radio" name="star1" value="1" />
<input id="star12" class="radio" type="radio" name="star1" value="2" />
<input id="star13" class="radio" type="radio" name="star1" value="3" />
<input id="star14" class="radio" type="radio" name="star1" value="4" />
<input id="star15" class="radio" type="radio" name="star1" value="5" />
</span>
</p>
<p>
<label>运输速度：</label>
<span class="radio">
<input class="radio" type="radio" name="star2" value="0" checked />
<label class="radio" for="star21"></label>
<label class="radio" for="star22"></label>
<label class="radio" for="star23"></label>
<label class="radio" for="star24"></label>
<label class="radio" for="star25"></label>
<input id="star21" class="radio" type="radio" name="star2" value="1" />
<input id="star22" class="radio" type="radio" name="star2" value="2" />
<input id="star23" class="radio" type="radio" name="star2" value="3" />
<input id="star24" class="radio" type="radio" name="star2" value="4" />
<input id="star25" class="radio" type="radio" name="star2" value="5" />
</span>
</p>
<p>
<label>货款发放：</label>
<span class="radio">
<input class="radio" type="radio" name="star3" value="0" checked />
<label class="radio" for="star31"></label>
<label class="radio" for="star32"></label>
<label class="radio" for="star33"></label>
<label class="radio" for="star34"></label>
<label class="radio" for="star35"></label>
<input id="star31" class="radio" type="radio" name="star3" value="1" />
<input id="star32" class="radio" type="radio" name="star3" value="2" />
<input id="star33" class="radio" type="radio" name="star3" value="3" />
<input id="star34" class="radio" type="radio" name="star3" value="4" />
<input id="star35" class="radio" type="radio" name="star3" value="5" />
</span>
</p>
<p>
<input class="btn" type="submit" value="提交" />
</p>
</form>
</body>
</html>
图片、
