JQuery表格表单操作
1、多选框应用代码示例
<form action=”#” method=”post”>
你喜欢的明星是？<br />
<input type=”checkbox” name=”boxs” value=”张嘉译” id=”1″ /><label for=”1″>张嘉译</label>
<input type=”checkbox” name=”boxs” value=”周润发” id=”2″ /><label for=”2″>周润发</label>
<input type=”checkbox” name=”boxs” value=”刘亦菲” id=”3″ /><label for=”2″>刘亦菲</label>
<input type=”checkbox” name=”boxs” value=”古天乐” id=”4″ /><label for=”2″>古天乐</label>
<input type=”checkbox” name=”boxs” value=”刘德华” id=”5″ /><label for=”2″>刘德华</label><br />
<input type=”button” id=”checkall” value=”全选” />
<input type=”button” id=”checkno” value=”全不选” />
<input type=”button” id=”checkre” value=”发选” />
<input type=”button” id=”send” value=”提交” />
</form>
<script language=”javascript”>
//全选
$(“#checkall”).click(function(){
$(“[name=boxs]:checkbox”).attr(“checked”,true);//选择name=boxs并且是checkbox
});
//全不选
$(“#checkno”).click(function(){
$(“[name=boxs]:checkbox”).attr(“checked”,false);
});
//反选
$(“#checkre”).click(function(){
$(“[name=boxs]:checkbox”).each(function(){//each是对于每个匹配的元素所要执行的函数
this.checked=!this.checked;
});
});
//提交
$(“#send”).click(function(){
var str=”选中的值是:”;
$(“[name=boxs]:checkbox:checked”).each(function(){
str+=$(this).val()+”|”;
});
alert(str);
});
</script>
2、表单验证代码示例
<style>
.high{ color:red;}
.onsuccess{ color:green;}
</style>
<form action=”#” method=”post”>
<div>
用户名:<input name=”username” id=”username” class=”required” type=”text” />
</div>
<div>
邮箱:<input name=”email” id=”email” type=”text” />
</div>
<input name=”sub” id=”send” value=”提交” type=”submit” />
</form>
<script language=”javascript”>
$(“form :input.required”).each(function(){
var $required=”<strong class=’high message’>*不能为空</strong>”;
$(this).parent().append($required);
});
$(“form :input”).blur(function(){
var $par=$(this).parent();//获取到当前input所在div
//验证用户名
if($(this).is(“#username”)){
if(this.value==” || this.value.length<6){
var message=’用户名长度至少6位’;
//先去掉以前的提醒
$(“.message”).remove();
$par.append(“<span class=’high message’>”+message+”</span>”);
}else{
var message=’用户名合法’;
$(“.message”).remove();
$par.append(“<span class=’onsuccess message’>”+message+”</span>”);
}
}
//验证邮箱
if($(this).is(“#email”)){
if(this.value==”” || (this.value!=”” && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var message=”E-Mail地址不合法”;
$(“.message”).remove();
$par.append(“<span class=’high message’>”+message+”</span>”);
}else{
var message=”E-Mail地址正确”;
$(“.message”).remove();
$par.append(“<span class=’onsuccess message’>”+message+”</span>”);
}
}
});
//提交整体验证
$(“#send”).click(function(){
$(“form .required:input”).trigger(‘blur’);
var num=$(“form .high”).length;//错误提示都带有high类，统计这个出现的次数
if(num){
return false;
}else{
alert(“全部验证成功!”);
return true;
}
});
</script>
3、表格展开关闭代码示例：
<style>
.parent{ background:#CCC;}
.select{ background:#666;}
</style>
<table>
<thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><!–表头–>
<tbody>
<tr id=”p_1″><td colspan=”3″>新闻采集部</td></tr>
<tr class=”son_p_1″><td>张三</td><td>男</td><td>23</td></tr>
<tr class=”son_p_1″><td>赵五</td><td>女</td><td>21</td></tr>
<tr class=”son_p_1″><td>李四</td><td>男</td><td>20</td></tr>
<tr class=”son_p_1″><td>小六</td><td>男</td><td>25</td></tr>
<tr id=”p_2″><td colspan=”3″>程序技术部</td></tr>
<tr class=”son_p_2″><td>张无忌</td><td>女</td><td>21</td></tr>
<tr class=”son_p_2″><td>李云龙</td><td>男</td><td>20</td></tr>
<tr class=”son_p_2″><td>韦小宝</td><td>男</td><td>25</td></tr>
</tbody>
</table>
<script language=”javascript”>
//观察发现每一个部门中有一个唯一的id而且他们包含的元素中都是son_父元素id形式
$(function(){
$(“tr.parent”).click(function(){
$(this).toggleClass(“select”)//选中的部门加深背景
.siblings(“.son_”+this.id).toggle();
});
});
//默认关闭，只需要激活click事件
$(“tbody tr[class!=parent]”).hide();
</script>
// <![CDATA[ //观察发现每一个部门中有一个唯一的id而且他们包含的元素中都是son_父元素id形式 $(function(){ $("tr.parent").click(function(){ $(this).toggleClass("select")//选中的部门加深背景 .siblings(".son_"+this.id).toggle(); }); }); //默认关闭，只需要激活click事件 $("tbody tr[class!=parent]").hide(); // ]]>
腾讯云开发者
