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 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
js转换对象为xml
Feb 17 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
Vue实现星级评价效果实例详解
Dec 30 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
星际实力自我测试
2020/03/04 星际争霸
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
Web技术实现移动监测的介绍
2017/09/18 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python使用struct处理二进制的实例详解
2017/09/11 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
python可视化text()函数使用详解
2020/02/11 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
网上蛋糕店创业计划书
2014/01/24 职场文书
招聘专员岗位职责
2014/03/07 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
部门年终奖分配方案
2014/05/07 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang