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 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
Node.js+Express配置入门教程
May 19 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
详解Vue单元测试case写法
May 24 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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
用PHP调用Oracle存储过程
2006/10/09 PHP
PHP语法速查表
2007/01/02 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
总结js函数相关知识点
2018/02/27 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
python list转矩阵的实例讲解
2018/08/04 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
主题教育活动总结
2014/05/05 职场文书
招商引资工作汇报
2014/10/28 职场文书
期末复习计划
2015/01/19 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js