jQuery操作表单常用控件方法小结
本文实例总结了jQuery操作表单常用控件方法。分享给大家供大家参考。具体如下：
下面的JS代码列出了jQuery操作表单常用控件（包括select，radiobox，checkbox）的常用方法，相信一定有你需要的
操作radio的html代码
Radion <inputtype="radio"name="rd"id="rd1"checked="checked"value="rd1"/> <inputtype="radio"name="rd"id="rd2"value="rd2"/> <inputtype="radio"name="rd"id="rd3"value="rd3"/>
1.获取选中值，三种方法都可以：
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.设置第一个Radio为选中值：
$('input:radio:first').attr('checked','checked');
或者
$('input:radio:first').attr('checked','true');
注:
attr("checked",'checked')=attr("checked",'true')=attr("checked",true)
3.设置最后一个Radio为选中值：
$('input:radio:last').attr('checked','checked');
或者
$('input:radio:last').attr('checked','true');
4.根据索引值设置任意一个radio为选中值：
$('input:radio').eq(索引值).attr('checked','true');
索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked','true');
5.根据Value值设置Radio为选中值
$("input:radio[value='rd2']").attr('checked','true');
或者
$("input[value='rd2']").attr('checked','true');
6.删除Value值为rd2的Radio
$("input:radio[value='rd2']").remove();
7.删除第几个Radio
$("input:radio").eq(索引值).remove();
索引值=0,1,2....
如删除第3个Radio:
$("input:radio").eq(2).remove();
8.遍历Radio
$('input:radio').each(function(index,domEle){
//写入代码
});
下面的代码演示了DropDownList的常用操作方法
DropDownList <selectid="sel"> <optionvalue="1"selected="selected">a</option> <optionvalue="2">b</option> <optionvalue="3">c</option> <optionvalue="4">d</option> <optionvalue="5">e</option> </select>
1.获取选中项的Value值：
$('select#seloption:selected').val();
或者
$('select#sel').find('option:selected').val();
获取选中项的Text值：
$('select#seloption:selected').text();
或者
$('select#sel').find('option:selected').text();
2.获取当前选中项的索引值：
$('select#sel').get(0).selectedIndex;
3.获取当前option的最大索引值：
$('select#seloption:last').attr("index")
4.获取DropdownList的长度：
$('select#sel')[0].options.length;
或者
$('select#sel').get(0).options.length;
5.设置第一个option为选中值：
$('select#seloption:first').attr('selected','true')
或者
$('select#sel')[0].selectedIndex=0;
6.设置最后一个option为选中值：
$('select#seloption:last).attr('selected','true')
7.根据索引值设置任意一个option为选中值：
$('select#sel')[0].selectedIndex=索引值;
索引值=0,1,2....
8.设置Value=4的option为选中值：
$('select#sel').attr('value','4');
或者
$("select#seloption[value='4']").attr('selected','true');
9.删除Value=3的option：
$("select#seloption[value='3']").remove();
10.删除第几个option：
$("select#seloption").eq(索引值).remove();
索引值=0,1,2....
如删除第3个Radio:
$("select#seloption").eq(2).remove();
11.删除第一个option：
$("select#seloption").eq(0).remove();
或者
$("select#seloption:first").remove();
12.删除最后一个option：
$("select#seloption:last").remove();
13.删除dropdownlist:
$("select#sel").remove();
14.在select后面添加一个option:
$("select#sel").append("<optionvalue='6'>f</option>");
15.在select前面添加一个option:
$("select#sel").prepend("<optionvalue='0'>0</option>");
16.遍历option：
$('select#seloption').each(function(index,domEle){
//写入代码
});
下面的代码演示了jQuery常用操作checkbox的方法
CheckBox <inputtype="checkbox"id="ck1"name="ck"vlaue="1"checked="checked"/> <inputtype="checkbox"id="ck2"name="ck"vlaue="2"/> <inputtype="checkbox"id="ck3"name="ck"vlaue="3"/> <inputtype="checkbox"id="ck4"name="ck"vlaue="4"/>
1.获取单个checkbox选中项(三种写法)：
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2.获取多个checkbox选中项：
$('input:checkbox').each(function(){
if($(this).attr('checked')==true){
alert($(this).val());
}
});
3.设置第一个checkbox为选中值：
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4.设置最后一个checkbox为选中值：
$('input:radio:last').attr('checked','checked');
或者
$('input:radio:last').attr('checked','true');
5.根据索引值设置任意一个checkbox为选中值：
$('input:checkbox).eq(索引值).attr('checked','true');
索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked','true');
6.选中多个checkbox：
同时选中第1个和第2个的checkbox：
$('input:radio').slice(0,2).attr('checked','true');
7.根据Value值设置checkbox为选中值：
$("input:checkbox[value='1']").attr('checked','true');
8.删除Value=1的checkbox：
$("input:checkbox[value='1']").remove();
9.删除第几个checkbox：
$("input:checkbox").eq(索引值).remove();
索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10.遍历checkbox：
$('input:checkbox').each(function(index,domEle){
//写入代码
});
11.全部选中
$('input:checkbox').each(function(){
$(this).attr('checked',true);
});
12.全部取消选择：
$('input:checkbox').each(function(){
$(this).attr('checked',false);
});
希望本文所述对大家的jQuery程序设计有所帮助。