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


Posted in Javascript onMarch 23, 2015

本文实例总结了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程序设计有所帮助。

Javascript 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
jsonp跨域请求详解
Jul 13 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 #Javascript
JavaScript中匿名函数用法实例
Mar 23 #Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 #Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 #Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 #Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 #Javascript
JavaScript通过select动态更换图片的方法
Mar 23 #Javascript
You might like
php csv操作类代码
2009/12/14 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
JavaScript游戏之优化篇
2010/11/08 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
js new Date()实例测试
2019/10/31 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python标准库shutil用法实例详解
2018/08/13 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python中sys模块是做什么用的
2020/08/16 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
工商管理本科生求职信
2014/07/13 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL