jQuery对表单元素的取值和赋值操作

转自  http://www.oncoding.cn/2009/jquery-input-value/

今天在使用jQuery的过程中，遇到两个不大不小的问题，写出来分享一下。

jQuery读取input元素的值：

帮助

1	< input type = "text" id = "keyword" />

使用常规的思路：$(“#keyword”).value 取值是取不到的，因为此时$(‘#keydord’)已经不是个element，而是个jquery对象，所以应该使用：

帮助

1	var inputValue = $( "#keyword" ).val();

因为Qjuery对象中第一个元素即为DOM对象，所以也可以这样取值：

帮助

1	var inputValue = $( "#keyword" )[0].value;

jQuery中 val()函数的作用：

val()
获得第一个匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值。包括select。如果多选，将返回一个数组，其包含所选的值。

返回值
String,Array

同理，对input元素赋值，需要：

帮助

1	$( "#keyword" ).val( "" );

或：

帮助

1	$( "#keyword" )[0].value = "" ;

附：jquery 1.3.2对基本表单元素的取值方法

帮助

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

/*获得TEXT.AREATEXT的值*/ var textval = $( "#text_id" ).attr( "value" ); //或者 var textval = $( "#text_id" ).val();   /*获取单选按钮的值*/ var valradio = $( "input[type=radio]:checked" ).val();   /*获取一组名为(items)的radio被选中项的值*/ var item = $( 'input[name=items]:checked' ).val();   /*获取复选框的值*/ var checkboxval = $( "#checkbox_id" ).attr( "value" )；   /*获取下拉列表的值*/ var selectval = $( '#select_id' ).val();   /*文本框，文本区域*/ $( "#text_id" ).attr( "value" , ");//清空内容 $(" #text_id").attr("value",'test');//填充内容   /*多选框checkbox*/ $(" #chk_id").attr("checked",");//使其未勾选 $( "#chk_id" ).attr( "checked" , true ); //勾选 if ($( "#chk_id" ).attr( 'checked' )== true ) //判断是否已经选中   /*单选组radio*/ $( "input[type=radio]" ).attr( "checked" , '2' ); //设置value=2的项目为当前选中项   /*下拉框select*/ $( "#select_id" ).attr( "value" , 'test' ); //设置value=test的项目为当前选中项 $( "testtest2" ).appendTo( "#select_id" ) //添加下拉框的option $( "#select_id" ).empty()； //清空下拉框   /*获取一组名为(items)的radio被选中项的值*/ var item = $( 'input[name=items]:checked' ).val(); //若未被选中 则val() = undefined   /*获取select被选中项的文本*/ var item = $( "select[name=items] option:selected" ).text();   /*select下拉框的第二个元素为当前选中值*/ $( '#select_id' )[0].selectedIndex = 1;   /*radio单选组的第二个元素为当前选中值*/ $( 'input[name=items]' ).get(1).checked = true ;   /*重置表单*/ $( "form" ).each( function (){ .reset(); });