使用val()选中select/checkbox/radio的值

服务器君一共花费了16.195 ms进行了6次数据库查询,努力地为您提供了提供了这个页面。

val()方法不仅能设置元素的值,同时也能获取元素的值。另外,val()方法还有另外一个用处,就是它能使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中,在表单操作中会经常用到。

下面先来演示val()方法的选中功能。

效果演示

多选1 多选2 多选3 多选4
单选1 单选2 单选3

该网页中一些元素是默认选中的,可以通过val()方法来改变它们的选中项。如果要使第1个下拉框的第2项被选中,可以用以下JQuery代码实现:

$("#single").val("选择2号");

如果要使下拉列表的第2项和第3项被选中,可以用以下JQuery代码实现:

$("#multiple").val(["选择2号", "选择3号"]);

在JQuery中,val()方法是从最后一个选项往前读取,如果选项的value或者text中任意一项符合就会被选中。例如:

<option value="选择2号">选择1号</option>  
<option value="选择1号">选择2号</option>  

无论使用val("选择1号")还是val("选择2号"),都会选中后面一个<option value="选择1号">选择2号</option>。

依照上面类似的写法,下面的代码可以使多选框和单选框被选中,JQuery代码如下:

$(":checkbox").val(["check2","check3"]);   
(":radio").val(["radio2"]);

在上面这个例子中,可以使用val()方法,也可以使用attr()方法来实现同样的功能。

$("#single option:eq(1)").attr("selected",true); //设置属性selected   
$("[value=check2]:checkbox").attr("checked",true);//设置属性checked

本例演示效果的JQuery代码如下:

$(function(){
	//设置单选下拉框选中
	$("#btn_1").click(function(){
		$("#single").val("选择2号");
		$("#tips").text("下拉框第2项已被选中");
	});
 	//设置多选下拉框选中
	$("#btn_2").click(function(){
		$("#multiple").val(["选择2号", "选择3号"]);
		$("#tips").text("下拉框第2项与第3项同时被选中");
	});
	//设置单选框和多选框选中
	$("#btn_3").click(function(){
		$(":checkbox").val(["check2","check3"]);
		$(":radio").val(["radio2"]);
		$("#tips").text("复选框2、3项与单选按钮第2个被选中");
	});    
//]]>
});

Creative Commons License

本文仅供自己学习与收藏之用,请勿转载,请勿用作其它用途(如商业目的等)。 原文链接:http://www.nowamagic.net/librarys/posts/jquery/25