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 相关文章推荐
js实现的捐赠管理完整实例
Jan 20 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
巧用canvas
2017/01/21 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
高级人员简历的自我评价分享
2013/11/03 职场文书
大学生毕业的自我鉴定
2013/11/13 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
交通事故私了协议书
2014/04/16 职场文书
代收款委托书范本
2014/10/01 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技