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 相关文章推荐
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
javascript如何写热点图
Dec 08 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
模拟select的代码
2011/10/19 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
js html实现计算器功能
2018/11/13 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
Python将图片转换为字符画的方法
2020/06/16 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python解析xml简单示例
2019/06/21 Python
python基础教程之while循环
2019/08/14 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
学校门卫岗位职责
2014/03/16 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
植树节活动总结
2014/04/30 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
民事二审代理词
2015/05/25 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis