效果截图：

HTML代码：

<body>
<ul id="list">
<li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li>
<li><label><input type="checkbox" name="items" value="2"> 2.海阔天空</label></li>
<li><label><input type="checkbox" name="items" value="3"> 3.真的爱你</label></li>
<li><label><input type="checkbox" name="items" value="4"> 4.不再犹豫</label></li>
<li><label><input type="checkbox" name="items" value="5"> 5.光辉岁月</label></li>
<li><label><input type="checkbox" name="items" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all"> 全选/全不选</br>
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" id="btn" id="getValue">
</body>

jquery代码：

<script type="text/javascript">
$(function(){

//全选/全不选
$("#all").click(function(){
$("[name=items]:checkbox").attr("checked",this.checked);
});
$("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#all").attr("checked",flag);
})

//全选
$("#selectAll").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",true);
});
});

//全不选
$("#unSelect").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",false);
});
});

//反选
$("#reverse").click(function(){
$("[name=items]:checkbox").each(function(){ //遍历每一个复选框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
this.checked=!this.checked; //js方法
});
});

//输出选中的值
$("#btn").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>

注：由于jquery版本的变更，新版本出现只能点击一次，老一点的版本是可以的，新的版本不可以使用attr来设置选中状态了，第一种解决方法是可以使用js原生的方法this.checked=true/false;

第二种解决方法是把attr换成prop。

jQuery对复选框（checkbox)的全选，全不选，反选等的操作的更多相关文章

  1. 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

  2. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  3. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  4. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

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

    赋值 复选框 CheckBox 遍历 取值  1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...

  6. Jquery对复选框CheckBox的操作

    checkbox: 多选框 //获取选中值  checkbox:$("#checkbox_id").attr("value"): 多选框checkbox,打勾: ...

  7. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  8. 基于CSS3自定义美化复选框Checkbox组合

    今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点.有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化check ...

  9. PyQt(Python+Qt)学习随笔：复选框checkBox的tristate属性

    在Qt Designer中,tristate属性是复选框checkBox相比较于QAbstractButton多出来的唯一属性. tristate属性表示复选框是三种状态还是两种状态,如果trista ...

  10. vue结合element-ui实现二级复选框checkbox

    vue结合element-ui实现二级复选框checkbox 话不多说先上效果 交互:1.点击按钮全选,所有的checkbox全部选中:点击清空,所有的checkbox框都不选:点击确定获取选中的ch ...

随机推荐

  1. ux.form.field.TreePicker 扩展，修复火狐不能展开bug

    /** * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes. * 动态 ...

  2. 在Windows/Ubuntu下安装OpenGL环境（GLUT/freeglut)与跨平台编译（mingw/g++）

    GLUT/freeglut 是什么? OpenGL 和它们有什么关系? OpenGL只是一个标准,它的实现一般自带在操作系统里,只要确保显卡驱动足够新就可以使用.如果需要在程序里直接使用OpenGL, ...

  3. mysql 索引- 笔记

    索引 mysql最常用的索引结构是btree(O(log(n))),但是总有一些情况下我们为了更好的性能希望能使用别的类型的索引.hash就是其中一种选择,例如我们在通过用户名检索用户id的时候,他们 ...

  4. 2 个UserControl 的传值问题

    问题描述:有2个UserControl:UserControl1 里有一个Button,UserControl2 里面有一个TextBox,这2个控件都加载到了主窗体Form1 上.要求的是,点击 U ...

  5. failed jobs because of past close date，关工单报错

    今天会计反映关不了工单.我们公司关工单的程序是自己开发的,可以整批关.报如下错误.我试着用Standad程序关,可以.看来应该是我们开发的程序有问题.后来发现,是抛到WIP_DJ_CLOSE_TEMP ...

  6. 十六、【适合中小企业的.Net轻量级开源框架】EnterpriseFrameWork框架核心类库之单点登录SSO

    回<[开源]EnterpriseFrameWork框架系列文章索引> EFW框架源代码下载:http://pan.baidu.com/s/1qWJjo3U 单点登录(Single Sign ...

  7. 读书笔记_Effective_C++_条款四十八：了解模板元编程

    作为模板部分的结束节,本条款谈到了模板元编程,元编程本质上就是将运行期的代价转移到编译期,它利用template编译生成C++源码,举下面阶乘例子: template <int N> st ...

  8. JavaScript 32位整型无符号操作

    在 JavaScript 中,所有整数字变量默认都是有符号整数,这意味着什么呢? 有符号整数使用 31 位表示整数的数值,用第 32 位表示整数的符号,0 表示正数,1 表示负数. 数值范围从 -2^ ...

  9. 二项堆(三)之 Java的实现

    概要 前面分别通过C和C++实现了二项堆,本章给出二项堆的Java版本.还是那句老话,三种实现的原理一样,择其一了解即可. 目录1. 二项树的介绍2. 二项堆的介绍3. 二项堆的基本操作4. 二项堆的 ...

  10. 【转载】Linux下编辑生成.mo文件

    转载自:http://www.hackbase.com/tech/2012-02-27/65972.html 编辑生成.mo文件 我们在弄网站的时候很可能会接触到.mo和.po文件..po文件是GNU ...