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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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 sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
python中sets模块的用法实例
2014/09/30 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
NumPy中的维度Axis详解
2019/11/26 Python
Python实现点云投影到平面显示
2020/01/18 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
转预备党员政审材料
2014/02/06 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
法院执行局工作总结
2015/08/11 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python