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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
使用Javascript简单计算器
Nov 17 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 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实现的返回数据格式化类实例
2014/09/22 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
JavaScript闭包和回调详解
2017/08/09 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python保存文件方法小结
2018/07/27 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
2014年销售经理工作总结
2014/12/01 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书