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 继承详解 第一篇
Aug 30 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
javascript实现表单验证
Jan 29 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
php文件上传类完整实例
2016/05/14 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
应征英语教师求职信
2013/11/27 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
个人投资计划书
2014/05/01 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
五一劳动节活动总结
2015/02/09 职场文书
党员年度个人总结
2015/02/14 职场文书
老干部座谈会主持词
2015/07/03 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书