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每日必学之多态
Feb 23 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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 高性能书写
2010/12/11 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
YII框架关联查询操作示例
2019/04/29 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
js 幻灯片的实现
2011/12/06 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
node.js中的require使用详解
2014/12/15 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
vue实现倒计时获取验证码效果
2020/04/17 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python命名空间的本质和加载顺序
2018/12/17 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
电子商务系毕业生自荐信
2014/05/29 职场文书
项目经理任命书
2014/06/04 职场文书
护理学专业求职信
2014/06/29 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
Python初学者必备的文件读写指南
2021/06/23 Python