<!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. laravel5.3 笔记一

    laravel5.3 笔记 安装环境 laravel环境,laravel中文学习论坛上面有相关的教程 创建应用 laravel new blog 其中blog就是你的应用的名字 数据迁移 php ar ...

  2. Clock network

    https://en.wikipedia.org/wiki/Clock_network

  3. 模板方法模式（TemplateMethod）

    定义:模板方法模式,定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 当我们要完成在某一细节层次一致的一个过程或一系列步骤 ...

  4. oracle主机修改IP后客户端无法连接

    无论SQLPLUS还是PLSQL Developer连接均报错: ERROR:ORA-12154: TNS: 无法解析指定的连接标识符 解决方法:修改主机IP后,客户端修改tnsnames文件IP:还 ...

  5. ssh登录命令（转）

    转:http://blog.csdn.net/edward_qing_lee/article/details/23133331 常用格式:ssh [-l login_name] [-p port] [ ...

  6. javascript XMLHttpRequest对象全面剖析

    转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...

  7. .NET Web开发之.NET MVC框架

    摘要:MVC是一种架构设计模式,该模式主要应用于图形化用户界面(GUI)应用程序.那么什么是MVC?MVC由三部分组成:Model(模型).View(视图)及Controller(控制器). MVC概 ...

  8. 由WSDL文件生成WEB service server端C#程序（转）

    一般一个已经实现功能的WEB Server会发布自己的WSDL文件,供客户端生成代理类. 但有时是先有的server与client交互的接口定义(WSDL)文件,然后由server和client端分别 ...

  9. Java转换

    1.如何将字符串String转化为整数int  int i = Integer.parseInt(str);   int i = Integer.valueOf(my_str).intValue(); ...

  10. JSON入门之二：org.json的基本用法

    java中用于解释json的主流工具有org.json.json-lib与gson,本文介绍org.json的应用. 官方文档: http://www.json.org/java/ http://de ...