<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
<li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
<li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
<li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
<li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
<li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all">
<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="获得选中的所有值" class="btn" id="getValue">
<script src="jquery-1.11.3.js"></script>
<script>
$(function () {
//全选或全不选
$("#all").click(function(){
if(this.checked){
$("#list :checkbox").attr("checked", true);
}else{
$("#list :checkbox").attr("checked", false);
}
});
//全选
$("#selectAll").click(function () {
$("#list :checkbox,#all").attr("checked", true);
});
//全不选
$("#unSelect").click(function () {
$("#list :checkbox,#all").attr("checked", false);
});
//反选
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
allchk();
});

//设置全选复选框
$("#list :checkbox").click(function(){
allchk();
});

//获取选中选项的值
$("#getValue").click(function(){
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');
alert(vals);
});
});
function allchk(){
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).attr("checked")==true){
chk++;
}
});
if(chknum==chk){//全选
$("#all").attr("checked",true);
}else{//不全选
$("#all").attr("checked",false);
}
}
</script>
</body>
</html>

checkbook全选/反选/全不选的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  3. 表单Checkbox全选反选全不选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  5. html js 全选 反选 全不选源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  7. WPF DataGrid CheckBox 多选 反选 全选

    效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...

  8. 全选，全不选，反选的js实现

    全选练习       ** 使用复选框上面一个属性判断是否选中                   - checked属性                   - checked=true:选中    ...

  9. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

随机推荐

  1. Windows多线程同步系列之三-----事件对象

    事件是一个内核事件,内核事件是什么呢,我理解也不深入也不好说,暂且理解为一个内核维护的数据类型吧通过内核事件同步主要 的方法是对事件的信号有和无来进行同步. 比如当我们一个线程进入一段临界代码(独占代 ...

  2. LeeCode-Delete Node in a Linked List

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  3. Redis 命令参考

    Redis 命令参考 http://redis.readthedocs.org/en/latest/index.html

  4. nginx : TCP代理和负载均衡的stream模块

    一直以来,Nginx 并不支持tcp协议,所以后台的一些基于TCP的业务就只能通过其他高可用负载软件来完成了,比如Haproxy. 这算是一个nginx比较明显的缺憾.不过,在1.90发布后这个认知将 ...

  5. jquery $(function) 区别

    document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是onloa ...

  6. Category类别

    1.在已有类的基础上进行扩展,无需像继承一样子类化,就可以直接添加一些方法 2.继承不仅可以添加方法还可以添加属性,类别只能添加方法 3.类别不会改变现有类的方法,万一重写,自己写的优先级高 4.把类 ...

  7. HDU 1073 - Online Judge

    模拟评测机判断答案 先判断有没有不一样的 有的话再提取出 有效子列 看看有没有错的 #include <iostream> #include <cstdio> #include ...

  8. 安装TDM-GCC

    TDM-GCC是一组免费的编译器套件,有32位和64位两种版本.其中64位版既可以编译生成64位的可执行文件,又可以编译生成32位的可执行文件.从TDM-GCC的官网可以下载到相应的安装包,安装完成后 ...

  9. JAVA中List与Array之间互换

    1.Array转List ArrayList<String> list = new ArrayList<String>(); String[] arr = new String ...

  10. 【Android类型SDK测试（二）】环境基础

    (一)语言 Android使用的Java语言,所以要测试Android类型的SDK,Java的基础知识还是需要的. 另外,Android中有NDK类型的编程,需要知道C相关的知识. (二)环境准备 A ...