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 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php 文件上传实例代码
2012/04/19 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
express如何使用session与cookie的方法
2018/01/30 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
构建Python包的五个简单准则简介
2015/06/15 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
详解Python self 参数
2019/08/30 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
销售心得体会
2014/01/02 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
工程造价专业求职信
2014/07/17 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
教师党员整改措施
2014/10/24 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2014年组织部工作总结
2014/11/14 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL