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 相关文章推荐
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
jQuery 名称冲突的解决方法
2011/04/08 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python实现的批量下载RFC文档
2015/03/10 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
用Python写一个自动木马程序
2019/09/17 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
python中的列表和元组区别分析
2020/12/30 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
社区母亲节活动方案
2014/03/05 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
装修施工安全责任书
2014/07/24 职场文书
2014年销售员工作总结
2014/12/01 职场文书
师范生见习自我总结
2015/06/23 职场文书