[b]一. 重置表单[/b]
[b]二. 文本框,文本区域[/b]
1:得到值:
或者:
2:清空内容
3:填充内容
[b]三. 单选框[/b]
1:回填赋值
2:获取单选按钮的值:
3:获取一组名为(items)的radio被选中项的值*/
4:设置value=2的项目为当前选中项:
5:获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):
6:radio单选组的第二个元素为当前选中值:
[b]四. 多选框checkbox[/b]
1:得到多选框的值
2:使其未勾选
勾选
3:判断是否已经选中
[b]五. 下拉框[/b]
1:获取下拉列表的值
2:回填赋值
方案2:
3:设置value=test的项目为当前选中项:
4:添加下拉框的option:
5:清空下拉框:
6:获取select被选中项的文本
7:select下拉框的第二个元素为当前选中值:
[b]例子1[/b]
[img]http://dl.iteye.com/upload/attachment/0063/3231/fcf92e40-8eee-3637-a1ea-1684d2c436c4.png[/img]
[img]http://dl.iteye.com/upload/attachment/0063/3465/5cf6e194-b01b-3894-ae26-507fc5a3578c.png[/img]
[b]例子2[/b]
[img]http://dl.iteye.com/upload/attachment/0063/3474/0215fbf9-b11e-371a-982d-9c97ef683936.png[/img]
[b]例子3:[/b]
[img]http://dl.iteye.com/upload/attachment/0063/5479/6560f3c4-facf-378b-9d5e-181eddd5ee5c.png[/img]
[b]例子4 : 防止重复提交[/b]
方案1 : 加在 按钮上
特点: 点击按钮就执行,发生在 表单验证逻辑之前
方案2:加在 form 上
特点: 发生在 表单验证逻辑之后 ,表单验证不通过,不会触发。推荐采用
方案 3:
[img]http://dl.iteye.com/upload/attachment/0063/5838/aa5ae145-9226-3fc5-8c50-ee8fbba9aef7.png[/img]
如果上面方法都不灵就用这个:
$("form").each(function(){
.reset();
});
[b]二. 文本框,文本区域[/b]
1:得到值:
var textval = $("#text_id").attr("value");
或者:
var textval = $("#text_id").val();
2:清空内容
$("#text_id").attr("value",'');
3:填充内容
$("#text_id").attr("value",'test');
[b]三. 单选框[/b]
1:回填赋值
<span>性别:</span>
<input id="sex" name="sex" type="radio" value="1"/> 男
<input id="sex" name="sex" type="radio" value="0"/> 女
<script language=javascript>
$(document).ready(function() {
$('[name="sex"]:radio').each(function() {
if (this.value == 0) {
this.checked = true;
}
});
});
</script>
2:获取单选按钮的值:
var valradio = $("input[@type=radio][@checked]").val();
3:获取一组名为(items)的radio被选中项的值*/
var item = $('input[@name=items][@checked]').val();
4:设置value=2的项目为当前选中项:
$("input[@type=radio]").attr("checked",'2');
5:获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):
var item = $('input[@name=items][@checked]').val();
6:radio单选组的第二个元素为当前选中值:
$('input[@name=items]').get(1).checked = true;
[b]四. 多选框checkbox[/b]
1:得到多选框的值
var checkboxval = $("#checkbox_id").attr("value");
2:使其未勾选
$("#chk_id").attr("checked",'');
勾选
$("#chk_id").attr("checked",true);
3:判断是否已经选中
if($("#chk_id").attr('checked')==true) {
...
}
[b]五. 下拉框[/b]
1:获取下拉列表的值
var selectval = $('#select_id').val();
2:回填赋值
<select name="sex" id="sex">
<option value="">请选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
$(document).ready(function() {
$("#sex").attr("value", ${filter.sex});
});
方案2:
<select id="prStatCd" name="prStatCd">
<option value="">--请选择--</option>
<option value="10">新建</option>
<option value="20">确认</option>
<option value="91">否决</option>
</select>
$("select[@name=prStatCd] option").each(function(k,v) {
if ($(this).val() == "${param.prStatCd}") {
$('#prStatCd')[0].selectedIndex = k;
return false;
}
});
3:设置value=test的项目为当前选中项:
$("#select_id").attr("value",'test');
4:添加下拉框的option:
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")
5:清空下拉框:
$("#select_id").empty();
6:获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
7:select下拉框的第二个元素为当前选中值:
$('#select_id')[0].selectedIndex = 1;
[b]例子1[/b]
[img]http://dl.iteye.com/upload/attachment/0063/3231/fcf92e40-8eee-3637-a1ea-1684d2c436c4.png[/img]
$(function() {
$("#isStu").click(function() {
if ($(this).attr("checked")) {
$(".ct7").show();
$(".ct7 *[required]").attr("required", true);
} else {
$(".ct7").hide();
$(".ct7 *[required]").attr("required", false);
}
})
$("#isStu").attr("checked", true);
$(".level").click(function() {
var typeValue = $(".level").index(this);
if (typeValue == 0) {
$("#classType").empty();
$("<option value=''>请选择班型</option>").appendTo("#classType");
$("<option>大学英语四级VIP全程班</option>").appendTo("#classType");
} else {
$("#classType").empty();
$("<option value=''>请选择班型</option>").appendTo("#classType");
$("<option>大学英语六级VIP全程班</option>").appendTo("#classType");
}
});
$(".level").click();
});
[img]http://dl.iteye.com/upload/attachment/0063/3465/5cf6e194-b01b-3894-ae26-507fc5a3578c.png[/img]
[b]例子2[/b]
考试级别:
<select id="type" class="cet" name="type">
<option value="0">全部</option>
<option value="1">四级</option>
<option value="2">六级</option>
</select>
<br>
所选班型:
<select id="classType" class="cet" name="classType"></select>
<script type="text/javascript">
$(document).ready(function() {
$("#type").change(function() {
$("#classType").empty();
var value = $(this).val();
if (value == 1) {
$("<option value=''>请选择班型</option>").appendTo("#classType");
$("<option>大学英语四级VIP全程班</option>").appendTo("#classType");
$("<option>大学英语四级精品全程班</option>").appendTo("#classType");
} else if (value == 2) {
$("<option value=''>请选择班型</option>").appendTo("#classType");
$("<option>大学英语六级VIP全程班</option>").appendTo("#classType");
$("<option>大学英语六级精品全程班</option>").appendTo("#classType");
}
})
});
</script>
[img]http://dl.iteye.com/upload/attachment/0063/3474/0215fbf9-b11e-371a-982d-9c97ef683936.png[/img]
[b]例子3:[/b]
<script type="text/javascript">
function del() {
if(confirm("确定删除吗?")){
window.location = "/shaifenUserServletMaintain/-1?_method=updateStatus&ids=" + getIds();
}
}
function shtg() {
window.location = "/shaifenUserServletMaintain/1?_method=updateStatus&ids=" + getIds();
}
function cxsh() {
window.location = "/shaifenUserServletMaintain/2?_method=updateStatus&ids=" + getIds();
}
function getIds() {
var ids = "";
$("input[name='id']").each(function() {
if (this.checked) {
if (ids != "") {
ids += ",";
}
ids += this.value;
}
});
return ids;
}
$("document").ready(function() {
$("#all").click(function() {
if (this.checked) {
$("input[name='id']").each(function() {
this.checked = true;
});
$("#qx").text("反选");
} else {
$("input[name='id']").each(function() {
this.checked = false;
});
$("#qx").text("全选");
}
});
})
</script>
<div class="m1">
<a href="javascript:del()">批量删除</a>
<a href="javascript:shtg()">批量审核通过</a>
<a href="javascript:cxsh()">批量审核不通过</a>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tab1 m1" id="tab2">
<tr>
<th width="40">
<span id="qx">全选</span>
<input type="checkbox" id="all" name="all">
</th>
<th width="60" align="center">ID</th>
<th width="60" align="center">userId</th>
<th width="120" align="center">姓名</th>
<th width="100" align="center">级别</th>
</tr>
<c:forEach var="item" items="${list}" varStatus="status">
<tr>
<td align="center"><input type="checkbox" id="id" value="${item.id}" name="id"/></td>
<td align="center">${item.id}</td>
<td>${item.userId}</td>
<td><c:out value="${item.realName}" escapeXml="true"/></td>
</tr>
</c:forEach>
</table>
[img]http://dl.iteye.com/upload/attachment/0063/5479/6560f3c4-facf-378b-9d5e-181eddd5ee5c.png[/img]
[b]例子4 : 防止重复提交[/b]
方案1 : 加在 按钮上
$("document").ready(function() {
$("input:submit").each(function() {
$(this).click(function() {
setdisabled(this,true);
return true;
});
});
function setdisabled(obj) {
setTimeout(function() {
obj.disabled = true;
}, 100);
}
})
特点: 点击按钮就执行,发生在 表单验证逻辑之前
方案2:加在 form 上
$("document").ready(function() {
$("#form1").submit(function(){
setdisabled($("#tj"));
});
function setdisabled(obj) {
setTimeout(function() {
obj.disabled = true;
}, 100);
}
})
特点: 发生在 表单验证逻辑之后 ,表单验证不通过,不会触发。推荐采用
方案 3:
$("document").ready(function() {
$("#form1").submit(function() {
$("#tj").attr("disabled","true");
});
})
[img]http://dl.iteye.com/upload/attachment/0063/5838/aa5ae145-9226-3fc5-8c50-ee8fbba9aef7.png[/img]
如果上面方法都不灵就用这个:
<script type="text/javascript">
var flag_submit = false;
$(document).ready(function() {
$("#form1").submit(function() {
if(flag_submit){
return false;
}
flag_submit = true;
});
})
</script>