一、获取和设置表单的值：val()和text()
1. 获取表单的值： $("#username").val();
2. 设置表单的值：
$("#username").val("我来了");
$("input[name='password']").val()
//checkbox得到的是一个数组，需要进行遍历
$("input[name='interest']:checked").each(function(n){
alert($(this).val());
});
//checkbox只能传入数组
$("input[name='interest']").val(["足球","篮球","羽毛球"]);
$("#address").val(); //获取select的值,即编号或下标
$("#address").text() //获取select中的所有文本
html部分
<form id="myform"> 用户名：<input type="text" name="username" id="username"/><br/> 密 码:<input type="password" name="password" id="password"/><br/> 用户兴趣:<input type="checkbox" name="interest" value="足球"/>足球 <input type="checkbox" name="interest" value="篮球"/>蓝球 <input type="checkbox" name="interest" value="羽毛球"/>羽毛球 <input type="checkbox" name="interest" value="游泳"/>游泳<br/> 用户性别:<input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女<br/> 用户户籍:<select name="address" id="address"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">昭通</option> <option value="4">彝良</option> </select> <br/> <input type="button" value="测试数据" id="btn"/> </form>
二、常用代码
1.重置表单
$("form").each(function(){
.reset();
});
2. 清空内容
$("#text_id").attr("value",'');
3.单选框
<span>性别：</span> <input id="sex" name="sex" type="radio" value="1"/> 男 <input id="sex" name="sex" type="radio" value="0"/> 女
3.1 回填赋值
$('[name="sex"]:radio').each(function() {
if (this.value == 0) {
this.checked = true;
}
});
3.2 获取单选按钮的值：
var valradio = $("input[@type=radio][@checked]").val();
3.3：获取一组名为(items)的radio被选中项的值
var item = $('input[@name=items][@checked]').val();
3.4：设置value=2的项目为当前选中项:
$("input[@type=radio]").attr("checked",'2');
3.5：获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):
var item = $('input[@name=items][@checked]').val();
3.6：radio单选组的第二个元素为当前选中值:
$('input[@name=items]').get(1).checked = true;
4.多选框
4.1:得到多选框的值
var checkboxval = $("#checkbox_id").attr("value")；
4.2:使其未勾选
- $("#chk_id").attr("checked",'');
4.3 勾选
$("#chk_id").attr("checked",true);
3:判断是否已经选中
if($("#chk_id").attr('checked')==true) {
...
}
5. 下拉框
5.1:获取下拉列表的值
var selectval = $('#select_id').val();
5.2 设置value=test的项目为当前选中项:
$("#select_id").attr("value",'test');
5.3 添加下拉框的option:
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")
5.4：清空下拉框:
$("#select_id").empty()；
6：获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
7：select下拉框的第二个元素为当前选中值:
$('#select_id')[0].selectedIndex = 1;
二、综合案例
1、级联选择1
//HTML
<label for="name">级别：</label> <input type="radio" name="level" id="level" class="level"> 四级 <input type="radio" name="level" id="level" class="level"> 六级<br/> <label>所报班级：</label><br/> <select id="classType" name="classType" width="200px"> <option value=''>请选择班型</option> </select> //Javascript <script type="text/javascript"> $(function() { $(".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(); }); </script>
2、级联选择2
//HTML
考试级别： <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>
//javascript <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>
2-1 Ajax级联选择
$(function(){ $("select#ctlJob").change(function(){ $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; } $("select#ctlPerson").html(options); }) }) })
3. 防止重复提交
多次递交表单对于web应用来说是个比较头疼的问题，下面的代码能够很好的帮助你解决这个问题：
$(document).ready(function() { $('form').submit(function() { if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') { jQuery.data(this, "disabledOnSubmit", { submited: true }); $('input[type=submit], input[type=button]', this).each(function() { $(this).attr("disabled", "disabled"); }); return true; } else { return false; } }); });
方案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);
}
})
特点： 点击按钮就执行，发生在 表单验证逻辑之前
将表单中的按钮禁用
下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据：
//禁用按钮： $("#somebutton").attr("disabled", true); //启动按钮： $("#submit-button").removeAttr("disabled");
可能大家往往会使用.attr(‘disabled',false);，不过这是不正确的调用
方案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");
});
})
如果上面方法都不灵就用这个
var flag_submit = false; $(document).ready(function() { $("#form1").submit(function() { if(flag_submit){ return false; } flag_submit = true; }); })
输入内容后启用递交按钮
$('#username').keyup(function() {
$('#submit').attr('disabled', !$('#username').val());
});
递交按钮只有在用户输入内容后才可以启动 在线调试 / 在线演示
4.改变文本框的获得焦点的样式
//添加一个类名为focus的样式 .focus {border: 1px solid #f00; background: #fcc; } $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); });
也可对标签高亮显示
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
5.复选框进行全选，反选，全不选操作
//全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked',true); }); //全不选 $("#CheckedNo").click(function(){ $('[name=items]:checkbox').attr('checked',false); }); //反选 $("#CheckedNo").click(function(){ $('[name=items]:checkbox').each(function(){ this.checked = !this.checked; })); //提交按钮 $("#send").click(function(){ var str = "你选中的是： "; $('[name=items]:checkbox:checked').each(function(){ str += $(this).val()+' '}) alert(str); );
6. 在表单中禁用“回车键”
$("#form").keypress(function(e) {
if (e.which == 13) {
return false;
}
});
7.清除所有的表单数据
可能针对不同的表单形式，你需要调用不同类型的清楚方法，不过使用下面这个现成方法，绝对能让你省不少功夫。
function clearForm(form) { // iterate over all of the inputs for the form // element that was passed in $(':input', form).each(function() { var type = this.type; var tag = this.tagName.toLowerCase(); // normalize case // it's ok to reset the value attr of text inputs, // password inputs, and textareas if (type == 'text' || type == 'password' || tag == 'textarea') this.value = ""; // checkboxes and radios need to have their checked state cleared // but should *not* have their 'value' changed else if (type == 'checkbox' || type == 'radio') this.checked = false; // select elements need to have their 'selectedIndex' property set to -1 // (this works for both single and multiple select elements) else if (tag == 'select') this.selectedIndex = -1; }); };