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 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
js new Date()实例测试
2019/10/31 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
python一键升级所有pip package的方法
2017/01/16 Python
numpy中的高维数组转置实例
2018/04/17 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
班主任工作年限证明
2014/01/12 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
机动车登记业务委托书
2014/10/08 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
个人向公司借款协议书
2016/03/19 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL