jQuery星級評論表單代碼



137 546 183



特效描述:jQuery 星級評論表單,jQuery星級評論表單代碼

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代碼

<script type="text/javascript">
$(function () {
	$('.text-area-input').click(function () {
		if ($(this).val() == '請輸入評論內容......') {
			$(this).css({
				color: '#000000'
			}).val('')
		}
	});
	//離開的時候
	$('.text-area-input').blur(function () {
		var iNum = $(this).val().length;
		var fixedLength = 20;//固定長度
		if (iNum < fixedLength) {
			$('.text-area-input-length span').html(fixedLength - iNum);
		} else {
			$(this).val($(this).val().substr(0, fixedLength - 1));//截取長度
			$('.text-area-input-length span').html(iNum - fixedLength);
		}
	});
	//按下的時候
	$('.text-area-input').keydown(function () {
		var iNum = $(this).val().length;
		var fixedLength = 20;//固定長度
		if (iNum < fixedLength) {
			$('.text-area-input-length span').html(fixedLength - iNum);
		} else {
			$(this).val($(this).val().substr(0, fixedLength - 1));//截取長度
			$('.text-area-input-length span').html(iNum - fixedLength);
		}
	});
	$('.text-area-bottom a').click(function () {
		var star = $('input[name=star]:checked').val();
		var content = $('textarea[name=content]').val();
		alert(content);
	});
	$('.text-area-star label').click(function () {
		var labelLength = $('.text-area-star label').length;
		for (var i = 0; i < labelLength; i++) {
			if (this == $('.text-area-star label').get(i)) {
				$('.text-area-star label').eq(i).addClass('red');
			} else {
				$('.text-area-star label').eq(i).removeClass('red');
			}
		}
	});
});
</script>
<div class="comment">
<div class="comment-level"></div>
<div class="comment-text-area">
	<div class="text-area-star">
		<label><input type="radio" name="star" value="1"/><span>一星</span></label>
		<label><input type="radio" name="star" value="2"/><span>二星</span></label>
		<label><input type="radio" name="star" value="3"/><span>三星</span></label>
		<label><input type="radio" name="star" value="4"/><span>四星</span></label>
		<label class="red"><input type="radio" checked name="star" value="5"/><span>五星</span></label>
	</div>
	<div><textarea class="text-area text-area-input" name="content">請輸入評論內容......</textarea></div>
	<div class="text-area-input-length">您還可輸入<span>20</span>個字</div>
	<div class="text-area-bottom"><a href="javascript:void(0);">提交數據</a></div>
</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 文本框 text文本框 選項卡自動切換 表單提交 星星打分 星星評分 評分
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子