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实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
Angular2入门--架构总览
Mar 29 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 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遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
JS运动基础框架实例分析
2015/03/03 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
2016/06/24 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python基础教程之异常详解
2019/01/10 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
缴纳养老保险的证明
2014/01/10 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
学生会招新策划书
2014/02/14 职场文书
滴水洞导游词
2015/02/10 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL