jquery操作复选框(checkbox)的12个小技巧总结


Posted in Javascript onFebruary 04, 2014

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);
});

Javascript 相关文章推荐
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
JavaScript构造函数详解
Dec 27 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 #Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 #Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 #Javascript
jquery中get和post的简单实例
Feb 04 #Javascript
jquery中$.post()方法的简单实例
Feb 04 #Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 #Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 #Javascript
You might like
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
简单了解django文件下载方式
2020/02/10 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
就业自我评价
2014/02/04 职场文书
市场营销方案范文
2014/03/11 职场文书
学生会主席竞聘书
2014/03/31 职场文书
大学生新学期计划书
2014/04/28 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
初二英语教学反思
2016/02/15 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
HttpClient实现文件上传功能
2022/08/14 Java/Android
Vue router配置与使用分析讲解
2022/12/24 Vue.js