jQuery操作表单常用控件方法小结

这篇文章主要介绍了jQuery操作表单常用控件方法,实例总结了jQuery针对常用表单控件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例总结了jQuery操作表单常用控件方法。分享给大家供大家参考。具体如下：

下面的JS代码列出了jQuery操作表单常用控件（包括select，radiobox，checkbox）的常用方法，相信一定有你需要的

操作radio的html代码

?

1 2 3 4

Radion <input type= "radio" name= "rd" id= "rd1" checked= "checked" value= "rd1" /> <input type= "radio" name= "rd" id= "rd2" value= "rd2" /> <input type= "radio" name= "rd" id= "rd3" value= "rd3" />

1.获取选中值，三种方法都可以： 

?

1 2 3

$( 'input:radio:checked' ).val(); $( "input[type='radio']:checked" ).val(); $( "input[name='rd']:checked" ).val();

2.设置第一个Radio为选中值： 

?

1	$( 'input:radio:first' ).attr( 'checked' , 'checked' );

或者 

?

1	$( 'input:radio:first' ).attr( 'checked' , 'true' );

注:

?

1	attr( "checked" , 'checked' )= attr( "checked" , 'true' )= attr( "checked" , true )

3.设置最后一个Radio为选中值： 

?

1	$( 'input:radio:last' ).attr( 'checked' , 'checked' );

或者 

?

1	$( 'input:radio:last' ).attr( 'checked' , 'true' );

4.根据索引值设置任意一个radio为选中值： 

?

1	$( 'input:radio' ).eq(索引值).attr( 'checked' , 'true' );

索引值=0,1,2....
或者 

?

1	$( 'input:radio' ).slice(1,2).attr( 'checked' , 'true' );

5.根据Value值设置Radio为选中值 

?

1	$( "input:radio[value='rd2']" ).attr( 'checked' , 'true' );

或者 

?

1	$( "input[value='rd2']" ).attr( 'checked' , 'true' );

6.删除Value值为rd2的Radio 

?

1	$( "input:radio[value='rd2']" ).remove();

7.删除第几个Radio 

?

1	$( "input:radio" ).eq(索引值).remove();

索引值=0,1,2....
如删除第3个Radio:

?

1	$( "input:radio" ).eq(2).remove();

8.遍历Radio 

?

1 2 3

$( 'input:radio' ).each( function (index,domEle){ //写入代码 });

下面的代码演示了DropDownList的常用操作方法

?

1 2 3 4 5 6 7 8

DropDownList <select id= "sel" > <option value= "1" selected= "selected" >a</option> <option value= "2" >b</option> <option value= "3" >c</option> <option value= "4" >d</option> <option value= "5" >e</option> </select>

1. 获取选中项的Value值： 

?

1	$( 'select#sel option:selected' ).val();

或者 

?

1	$( 'select#sel' ).find( 'option:selected' ).val();

获取选中项的Text值： 

?

1	$( 'select#seloption:selected' ).text();

或者 

?

1	$( 'select#sel' ).find( 'option:selected' ).text();

2. 获取当前选中项的索引值： 

?

1	$( 'select#sel' ).get(0).selectedIndex;

3. 获取当前option的最大索引值： 

?

1	$( 'select#sel option:last' ).attr( "index" )

4. 获取DropdownList的长度： 

?

1	$( 'select#sel' )[0].options.length;

或者 

?

1	$( 'select#sel' ).get(0).options.length;

5. 设置第一个option为选中值： 

?

1	$( 'select#sel option:first' ).attr( 'selected' , 'true' )

或者 

?

1	$( 'select#sel' )[0].selectedIndex = 0;

6.设置最后一个option为选中值： 

?

1	$( 'select#sel option:last).attr(' selected ',' true ')

7. 根据索引值设置任意一个option为选中值： 

?

1	$( 'select#sel' )[0].selectedIndex =索引值;

索引值=0,1,2....
8. 设置Value=4 的option为选中值： 

?

1	$( 'select#sel' ).attr( 'value' , '4' );

或者 

?

1	$( "select#sel option[value='4']" ).attr( 'selected' , 'true' );

9. 删除Value=3的option： 

?

1	$( "select#sel option[value='3']" ).remove();

10.删除第几个option： 

?

1	$( " select#sel option " ).eq(索引值).remove();

索引值=0,1,2....
如删除第3个Radio: 

?

1	$( " select#sel option " ).eq(2).remove();

11.删除第一个option： 

?

1	$( " select#sel option " ).eq(0).remove();

或者 

?

1	$( "select#sel option:first" ).remove();

12. 删除最后一个option： 

?

1	$( "select#sel option:last" ).remove();

13. 删除dropdownlist: 

?

1	$( "select#sel" ).remove();

14.在select后面添加一个option: 

?

1	$( "select#sel" ).append( "<option value='6'>f</option>" );

15. 在select前面添加一个option: 

?

1	$( "select#sel" ).prepend( "<option value='0'>0</option>" );

16. 遍历option： 

?

1 2 3

$( ' select#sel option ' ).each( function (index, domEle) { //写入代码 });

下面的代码演示了jQuery常用操作checkbox的方法

?

1 2 3 4 5

CheckBox <input type= "checkbox" id= "ck1" name= "ck" vlaue= "1" checked= "checked" /> <input type= "checkbox" id= "ck2" name= "ck" vlaue= "2" /> <input type= "checkbox" id= "ck3" name= "ck" vlaue= "3" /> <input type= "checkbox" id= "ck4" name= "ck" vlaue= "4" />

1. 获取单个checkbox选中项(三种写法)： 

?

1	$( "input:checkbox:checked" ).val()

或者 

?

1	$( "input:[type='checkbox']:checked" ).val();

或者 

?

1	$( "input:[name='ck']:checked" ).val();

2. 获取多个checkbox选中项： 

?

1 2 3 4 5

$( 'input:checkbox' ).each( function () { if ($( this ).attr( 'checked' ) == true ) { alert($( this ).val()); } });

3. 设置第一个checkbox 为选中值： 

?

1	$( 'input:checkbox:first' ).attr( "checked" , 'checked' );

或者 

?

1	$( 'input:checkbox' ).eq(0).attr( "checked" , 'true' );

4. 设置最后一个checkbox为选中值： 

?

1	$( 'input:radio:last' ).attr( 'checked' , 'checked' );

或者 

?

1	$( 'input:radio:last' ).attr( 'checked' , 'true' );

5. 根据索引值设置任意一个checkbox为选中值： 

?

1	$( 'input:checkbox).eq(索引值).attr(' checked ', ' true ');

索引值=0,1,2....
或者 

?

1	$( 'input:radio' ).slice(1,2).attr( 'checked' , 'true' );

6. 选中多个checkbox： 
同时选中第1个和第2个的checkbox： 

?

1	$( 'input:radio' ).slice(0,2).attr( 'checked' , 'true' );

7. 根据Value值设置checkbox为选中值： 

?

1	$( "input:checkbox[value='1']" ).attr( 'checked' , 'true' );

8. 删除Value=1的checkbox： 

?

1	$( "input:checkbox[value='1']" ).remove();

9. 删除第几个checkbox： 

?

1	$( "input:checkbox" ).eq(索引值).remove();

索引值=0,1,2....
如删除第3个checkbox: 

?

1	$( "input:checkbox" ).eq(2).remove();

10.遍历checkbox： 

?

1 2 3

$( 'input:checkbox' ).each( function (index, domEle) { //写入代码 });

11.全部选中 

?

1 2 3

$( 'input:checkbox' ).each( function () { $( this ).attr( 'checked' , true ); });

12.全部取消选择： 

?

1 2 3

$( 'input:checkbox' ).each( function () { $( this ).attr( 'checked' , false ); });

希望本文所述对大家的jQuery程序设计有所帮助。