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 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
详解JavaScript 的执行机制
Sep 18 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支持页面回退的两种方法
2008/01/10 PHP
php-fpm配置详解
2014/02/12 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
医院护士的求职信
2014/01/03 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
5s推行计划书
2014/05/06 职场文书
电子专业求职信
2014/06/19 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis