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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
jquery高效反选具体实现
May 05 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
JS监听组合按键思路及实现过程
Apr 17 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配置文件中最常用四个ini函数
2007/03/19 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
超级退弹代码
2008/07/07 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python中使用item()方法遍历字典的例子
2014/08/26 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
基于python实现名片管理系统
2018/11/30 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
解释i节点在文件系统中的作用
2013/11/26 面试题
烹饪大赛策划方案
2014/05/26 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
2015年实习单位评语
2015/03/25 职场文书
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技