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

网络编程 2025/1/18 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

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

操作radio的html代码

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.获取选中值，三种方法都可以：

$('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
<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值：

$('select#sel option: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#sel option:last').attr("index")

4. 获取DropdownList的长度：

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

或者

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

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

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

或者

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

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

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

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

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

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

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

或者

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

9. 删除Value=3的option：

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

10.删除第几个option：

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

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

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

11.删除第一个option：

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

或者

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

12. 删除最后一个option：

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

13. 删除dropdownlist:

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

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

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

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

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

16. 遍历option：

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

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

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选中项(三种写法)：

$("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程序设计有所帮助。

jQuery,操作,表单,控件,方法

标签：

jQuery,操作,表单,控件,方法

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“jQuery操作表单常用控件方法小结”

暂无jQuery操作表单常用控件方法小结的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

jQuery,操作,表单,控件,方法

jQuery实现拖拽效果插件的方法

JavaScript自定义等待wait函数实例分析

评论“jQuery操作表单常用控件方法小结”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

jQuery,操作,表单,控件,方法

jQuery实现拖拽效果插件的方法

JavaScript自定义等待wait函数实例分析

评论“jQuery操作表单常用控件方法小结”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存