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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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使用者状态管理功能的应用
2006/10/09 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
深入理解Python中的内置常量
2017/05/20 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
python中如何打包用户自定义模块
2020/09/23 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
抗洪抢险事迹材料
2014/05/06 职场文书
市政管理求职信范文
2014/05/07 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS