jQuery星级评论表单代码



129 513 172



特效描述: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

加群请备注:从官网了解到