jQuery操作复选框(CheckBox)的取值赋值实现代码


Posted in Javascript onJanuary 10, 2017

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

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

以上所述是小编给大家介绍的jQuery操作复选框(CheckBox)的取值赋值实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
JS提交form表单实例分析
Dec 10 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 #Javascript
jquery 正整数数字校验正则表达式
Jan 10 #Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 #Javascript
JS遍历对象属性的方法示例
Jan 10 #Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 #Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 #Javascript
js实现背景图自适应窗口大小
Jan 10 #Javascript
You might like
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
php自动加载代码实例详解
2021/02/26 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python内建模块struct实例详解
2018/02/02 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
追悼词范文大全
2015/06/23 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript