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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
vue.js学习之递归组件
Dec 13 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
前端JS获取URL参数的4种方法总结
Apr 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
数据库的日期格式转换
2006/10/09 PHP
PHP类的反射用法实例
2014/11/03 PHP
php定时执行任务设置详解
2015/02/06 PHP
使用PHP反射机制来构造"CREATE TABLE"的sql语句
2019/03/21 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python中文编码那些事
2014/06/25 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
创新比赛获奖感言
2014/02/13 职场文书
学校春季防火方案
2014/06/08 职场文书
大学生标准自荐书
2014/06/15 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
停发工资证明范本
2015/06/12 职场文书