JQuery补充——获取与设置表单值
//写jQuery代码时注意前面一定要记得加$(function(){});，在文档加载完成后进行代码的编写
使用jQuery的表单对象属性来选择被选中的项：:checked，详见文档选择器部分
根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
一、单选框radio
1.获取被选中的单选框的value：
var item = $("input[name=hobby][checked]").val();
//设置则为带参的方法
基础代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试表单数据值的操作</title> <script src="bootstrap\js\jquery.min.js"> </script> </head> <body> <form action="#"> <input type="button" id="btn" value="开始测试"><br/> <input type="radio" name="hobby" value="eat" />吃饭<br/> <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/> </form> <script type="text/javascript"> //必须等待文档加载完进行操作！ $(function(){ $("#btn").click(function(){ var item = $("input[name=hobby][checked]").val(); alert(item); }); }); </script> </body> </html>
2.设置拥有指定value值为选中
$("input[type=radio]").attr("checked",'eat');
此方式相对直观：
$("input[name=hobby][value=eat]").attr("checked",true);
二、下拉框select
1.获取被选中的option的value值
var item = $("select[name=ball] option[selected]").val();
获取里面的文本值：
var item = $("select[name=ball] option[selected]").text();
基础代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试表单数据值的操作</title> <script src="bootstrap\js\jquery.min.js"> </script> </head> <body> <form action="#"> <!--单选框--> <input type="button" id="btn" value="开始测试"><br/> <input type="radio" name="hobby" value="eat"/>吃饭<br/> <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/> <!--下拉框--> <select name="ball"> <option value="pingpang">乒乓球</option> <option value="basketball">篮球</option> <option value="baseball" selected>排球</option> </select> </form> <script type="text/javascript"> //必须等待文档加载完进行操作！ $(function(){ $("#btn").click(function(){ /*1.var item = $("input[name=hobby][checked]").val(); alert(item); /*2.$("input[type=radio]").attr("checked",'eat');*/ /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/ var item = $("select[name=ball] option[selected]").text(); alert(item) }); }); </script> </body> </html>
2.设置指定value值选中
$("select[name=ball]").val("pingpang");
三、输入框（文本框、文本域）
1.获取文本框、文本域中的值
var item = $("#username").val();
基础代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试表单数据值的操作</title> <script src="bootstrap\js\jquery.min.js"> </script> </head> <body> <form action="#"> <!--单选框--> <input type="button" id="btn" value="开始测试"><br/> <input type="radio" name="hobby" value="eat"/>吃饭<br/> <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/> <!--下拉框--> <select name="ball"> <option value="pingpang">乒乓球</option> <option value="basketball">篮球</option> <option value="baseball" selected>排球</option> </select> <br/> <!--普通文本框--> 用户名：<input type="text" name="username" id="username"/> </form> <script type="text/javascript"> //必须等待文档加载完进行操作！ $(function(){ $("#btn").click(function(){ /*1.var item = $("input[name=hobby][checked]").val(); alert(item); /*2.$("input[type=radio]").attr("checked",'eat');*/ /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/ /*var item = $("select[name=ball] option[selected]").val(); alert(item)*/ /*$("select[name=ball]").val("pingpang");*/ /*$("select[name=ball] option[text='篮球']").attr("selected",true);*/ var item = $("#username").val(); alert(item); }); }); </script> </body> </html>
2.设置文本框、文本域中的值
$("#username").val("777");
四、复选框checkbox
1.设置指定value值的复选框被选中:可以使用prop()，见页首
$("input[name=fruit][value=apple]").attr("checked",true);
//类似单选框
可以同时使得多个被选中
$("input[name=fruit]").attr("checked",true);
基础代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试表单数据值的操作</title> <script src="bootstrap\js\jquery.min.js"> </script> </head> <body> <form action="#"> <!--单选框--> <input type="button" id="btn" value="开始测试"><br/> <input type="radio" name="hobby" value="eat"/>吃饭<br/> <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/> <!--下拉框--> <select name="ball"> <option value="pingpang">乒乓球</option> <option value="basketball">篮球</option> <option value="baseball" selected>排球</option> </select> <br/> <!--普通文本框--> 用户名：<input type="text" name="username" id="username" /><br> <!--复选框--> <input type="checkbox" name="fruit" value="apple">苹果 <input type="checkbox" name="fruit" value="banana">香蕉 <input type="checkbox" name="fruit" value="orange">橘子 </form> <script type="text/javascript"> //必须等待文档加载完进行操作！ $(function(){ $("#btn").click(function(){ /*1.var item = $("input[name=hobby][checked]").val(); alert(item); /*2.$("input[type=radio]").attr("checked",'eat');*/ /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/ /*var item = $("select[name=ball] option[selected]").val(); alert(item)*/ /*$("select[name=ball]").val("pingpang");*/ /*$("select[name=ball] option[text='篮球']").attr("selected",true);*/ /*var item = $("#username").val(); alert(item);*/ /*$("#username").val("777");*/ $("input[name=fruit]").attr("checked",true); }); }); </script> </body> </html>
2.获取被选中的复选框的长度
var l = $("input[name=fruit]:checked").length;
3.遍历被选中的checkbox的值
$("input[name=fruit]:checked").each(function(){
alert(this.value);
});
当然，也可以包装为jQuery对象的写法：
$("input[name=fruit]:checked").each(function(){
alert($(this).val());
});
全选与全不选
$("#btn1").click(function(){
$("input[name='checkbox']").attr("checked","true");
})
$("#btn2").click(function(){
$("input[name='checkbox']").removeAttr("checked");
})
全选框控制一组复选框全选全不选状态：
//全选框的单击事件：
$("#check_all").click(function(){
//直接使用attr()时是undefined，因为我们定义的时候没有定义，我们使用prop()
//$(this).prop("checked");
//下面的单个的框的值就是全选的状态的值
$(".check_item").prop("checked",$(this).prop("checked"));
});
未选满时，全选框未选中
//为后来动态生成的check_item绑定单击事件
$(document).on("click",".check_item",function(){
//若当前选中的元素为5个全选，则全选按钮选中
//当然，这里不能写死，如果将来变为6个7个还需改动
var flag = $(".check_item:checked").length == $(".check_item").length;
$("#check_all").prop("checked",flag);
});
//补充：重置表单：$('#yigeform')[0].reset()
