这篇文章主要介绍了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程序设计有所帮助。