<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
<title>反选/反选/全不选/单选</title>
<style>
*{
padding: 0;
margin: 0;
}
.nav{
margin-top: 20px;
margin-left: 50px;
}
.nav>label{
display: inline-block;
width: 100px;
margin: auto
}
input{
vertical-align: middle;
margin-right: 6px;
}
.select{
margin-left: 50px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="nav">
<label><input class="allcheck" type="checkbox" />全选</label>
<label><input class="reversecheck" type="checkbox" />反选</label>
<label><input class="nonecheck" type="checkbox" />全不选</label>
</div>
<ul class="select">
<li><label><input class="onecheck" type="checkbox" />博客园</label></li>
<li><label><input class="onecheck" type="checkbox" />博客园</label></li>
<li><label><input class="onecheck" type="checkbox" />博客园</label></li>
<li><label><input class="onecheck" type="checkbox" />博客园</label></li>
<li><label><input class="onecheck" type="checkbox" />博客园</label></li>
<li><label><input class="onecheck" type="checkbox" />博客园</label></li>
</ul>
<script>
//全选
$(".allcheck").on("click",function(){
var isSelect = this.checked;
if (isSelect) {
$(".reversecheck").prop("checked", false);
$(".nonecheck").prop("checked", false);
$('.onecheck').each(function () {
$(this).prop("checked", true)
});
}
else {
$(".onecheck").prop("checked", false)
}
})
// 反选
$(".reversecheck").on("click",function(){
var oneSelect = $(".onecheck");
var isSelect = this.checked;
if (isSelect) {
$(".allcheck").prop("checked", false);
for (var i = 0; i < oneSelect.length; i++) {
var e = oneSelect[i];
e.checked = !e.checked;
}
}
})
// 全不选
$(".nonecheck").on("click",function(){
$(".onecheck").prop("checked", false);
$(".allcheck").prop("checked", '');
$(".reversecheck").prop("checked", '');
})
// 单选
$(".onecheck").on("click",function(){
var flag = true;
$(".onecheck").each(function () {
if (!this.checked) {
flag = false;
}
})
if (flag) {
$(".allcheck").prop('checked', true);
$(".reversecheck").prop("checked", '');
$(".nonecheck").prop("checked", '');
} else {
$(".allcheck").prop('checked', '');
}
})
</script>
</body>
</html>

checked 完整版全选,单选,反选的更多相关文章

  1. 夺命雷公狗-----React---28--小案例之react经典案例todos(全选和反选)完

    这个功能实现的步骤如下所示: 最终实现全选和反选,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  2. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  3. input单选框全选与反选

    input单选框全选与反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. javaScript_Demo 全选和反选单选框

    进行单选的全选和反选 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  5. 练习-checkbox 全选 ,反选, 单选,以及取值

    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  6. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  7. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  8. 关于checkbox全选与反选的问题

    在一组checkbox中常有这样的需求,选择全选按钮,所有的选项必须全选上,当再次点击时,则所有的按钮必须反选,当点击一组checkbox时,只有有一个不选上,则按钮不选中,当所有的按钮全部选上时,此 ...

  9. 利用JQuery实现全选和反选的几种方法

    前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现. 如图:要实现的效果是点击全选框全部选中,再点击全部不选中 方 ...

随机推荐

  1. Linux CentOS7 开通端口外网端口访问权限

    一.查看系统防火墙状态(如果返回 running 代表防火墙启动正常)firewall-cmd --state二.开启端口外网访问1.添加端口 返回 success 代表成功(--permanent永 ...

  2. 通过GSM模块发送经纬度求救信息。

    本博客作为实验笔记,仅供学习交流.(转载请注明出处) 本实验通过GSM模块:SIM900a,实现向特定手机发送sos求救信号,并且利用GPS模块:微科VK2828U7G5LF,将经纬度信息同时发送到手 ...

  3. 【Android】EventReminder使用教程(日历事件导出封装库)

    碎碎念 为啥要写这个库呢? 尝试自己写一个库调用,学习一下这个流程,为以后做准备 日历库在网上的资料太少了,而这个功能却又很实用 自己做的项目都会涉及到事件导出功能,不想重复写代码 使用方法 引入 在 ...

  4. [算法总结]康托展开Cantor Expansion

    目录 一.关于康托展开 1.什么是康托展开 2.康托展开实现原理 二.具体实施 1.模板 一.关于康托展开 1.什么是康托展开 求出给定一个由1n个整数组成的任意排列在1n的全排列中的位置. 解决这样 ...

  5. C#——继承

    在某基类中声明 virtual 并在一个或多个派生类中被重新定义的成员函数称为虚函数. 虚函数的作用就是实现多态性(Polymorphism),多态性是将接口与实现进行分离. C#作为完全面向对象语言 ...

  6. SQL Server 2005 sa登录失败。已成功与服务器建立连接 但是在登录过程中发生错误。 provider 共享内存提供程序 error 0 管道的另一端上无任何进程。

    SQL Server 2005 Express版 用户 'sa' 登录失败.该用户与可信 SQL Server 连接无关联.提示错误:已成功与服务器建立连接 但是在登录过程中发生错误. provide ...

  7. stand up meeting 12-2

    今天因为各位组员组里项目原因没有集中在一起进行stand up meeting.但是士杰和天赋国庆分别对项目进度和前后端的结合进行的沟通. 针对后端部分,天赋完成了GetRankingData API ...

  8. stand up meeting 12/2/2015

    part 组员 今日工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云  将logic部分提供的delete接口接入,与logic,数据库部分沟通实现了add/delete按钮的复用:解决UI部 ...

  9. DNA sequence HDU - 1560(IDA*,迭代加深搜索)

    题目大意:有n个DNA序列,构造一个新的序列,使得这n个DNA序列都是它的子序列,然后输出最小长度. 题解:第一次接触IDA*算法,感觉~~好暴力!!思路:维护一个数组pos[i],表示第i个串该匹配 ...

  10. 跨行程序员Java进阶--基础语法

    1.基础语法 Hello Wolrd 首先定义类 -- public class 类名 在类定义之后加上一对大括号 -- {} 在大括号中间添加一个主(main)方法/函数 -- public sta ...