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 相关文章推荐
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
常用DOM整理
Jun 16 Javascript
javascript每日必学之多态
Feb 23 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
javascript随机变色实例代码
Oct 15 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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 程序员也要学会使用“异常”
2009/06/16 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
Python写的Socks5协议代理服务器
2014/08/06 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python性能优化的20条建议
2014/10/25 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
使用python实现简单五子棋游戏
2019/06/18 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Python创建数字列表的示例
2019/11/28 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python单链表原理与实现方法详解
2020/02/22 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
党员承诺书格式
2014/05/21 职场文书
鼓舞士气的口号
2014/06/16 职场文书
员工2014年度工作总结
2014/12/09 职场文书
刑事附带民事上诉状
2015/05/23 职场文书