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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
跟我学习javascript的循环
Nov 18 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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
header()函数使用说明
2006/11/23 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
Node.js文件操作详解
2014/08/16 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
详解React 元素渲染
2020/07/07 Javascript
Python 列表理解及使用方法
2017/10/27 Python
python回调函数中使用多线程的方法
2017/12/25 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
工作证明格式范文
2015/06/15 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
Python实战之疫苗研发情况可视化
2021/05/18 Python
使用Pytorch训练two-head网络的操作
2021/05/28 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记