jquery操作复选框(checkbox)的12个小技巧总结


Posted in Javascript onFebruary 04, 2014

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

Javascript 相关文章推荐
尽可能写"友好"的"Javascript"代码
Jan 09 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
纯JS实现简单的日历
Jun 26 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 #Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 #Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 #Javascript
jquery中get和post的简单实例
Feb 04 #Javascript
jquery中$.post()方法的简单实例
Feb 04 #Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 #Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 #Javascript
You might like
php include,include_once,require,require_once
2008/09/05 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
php下连接mssql2005的代码
2011/01/17 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
事业单位请假制度
2014/01/13 职场文书
安全责任协议书
2014/04/21 职场文书
司法助理专业自荐书
2014/06/13 职场文书
超市店庆活动方案
2014/08/31 职场文书
施工员岗位职责
2015/02/10 职场文书