JQuery CheckBox(复选框)操作方法汇总


Posted in Javascript onApril 15, 2015

JQuery CheckBox(复选框)操作方法汇总

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());

            }

     });

或者
('input:checkbox').map(function () {             

   return(this).val();

}).get().join(',') ;

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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 #Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 #Javascript
JS扩展方法实例分析
Apr 15 #Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 #Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 #Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 #Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 #Javascript
You might like
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python距离测量的方法
2018/03/06 Python
python实现维吉尼亚算法
2019/03/20 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
static关键字的用法
2013/10/07 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
先进员工事迹材料
2014/12/20 职场文书
活动总结模板大全
2015/05/11 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android