jQuery表单 表格操作及应用
1.文本框添加获取和失去焦点事件
.focus() .blur()
2.多行文本框变大(+) 变小(-)代码
var $comment =$("#comment"); //获取评论框
$(".bigger").click(function(){ //“放大”按钮绑定单击事件
if(!$comment.is(":animated")){ //判断是否处于动画
if($comment.height()<500){
$comment.animate({ height: "+=50" },400); //重置高度,在原有的基础上加50
}
}
});
3.滚动条scrollTop()
var $comment=$("#comment");
$(".up").click(function(){
if(!$comment.is(":animated")){
$comment.animate({ scrollTop : "-=50" },400);
}
});
4. 复选框
<script type="text/javaScript">
$(function(){
$("#CheckedAll").click(function(){ //绑定单击全选事件
$("[name=items]:checkbox").attr("checked",true);
});
$("#CheckedNo").click(function(){ //绑定单击全不选事件
$("[name=items]:checkbox").attr("checked",false);
});
$("#CheckedRev").click(function(){ //绑定单击反选事件
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
});
$("#send").click(function(){ //绑定单击提交事件
var str="你选择的是:\r\n";
$("[name=items]:checkbox:checked").each(function(){
str += $(this).val()+"\r\n";
});
alert(str);
});
});
</script>
</head>
<body>
<form>
你爱好的运动是?<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="蓝球" />蓝球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
<input type="button" id="CheckedAll" value="全选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反选" />
<input type="button" id="send" value="提交" />
</form>
</body>
$("#CheckedALL").click(function(){ //绑定复选框全选/全不选复选框事件
if(this.checked){
$("[name=items]:checkbox").attr("checked",true);
}else{
$("[name=items]:checkbox").attr("checked",false);
}
});