<!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. 23.1 abstract抽象类案例

    package day2_抽象类; /* * 基础班老湿,就业班老湿 * 共性 * 属性 姓名,年龄,性别 * 行为 讲课 */ public class AbstractTeacherTest { ...

  2. xargs与exec区别

    平时使用find命令查找出文件的时候有时候后面有时候用-exec有时候用管道加xargs,这2个到底有什么不同?下面就这2个的不同做简单介绍. 零.实验环境 [root@osker /]# find ...

  3. coding 注意事项（总结中）

    Uber Go 语言代码风格指南可以参考下:https://www.cnblogs.com/ricklz/p/11670932.html 最近写代码,老是被吐槽,代码写的不好,细节处理的不好. 那么下 ...

  4. MAC 系统java开发环境搭建教程

    1.在安装JDK之前,先查看下自己电脑是否已经安装了JDK. 打开终端,输入java -version并回车.     从上图中可以看出我们已安装了,JDK 8.如果这个版本是你需要的版本,可直接看4 ...

  5. 数据结构和算法(Golang实现)(28)查找算法-AVL树

    AVL树 二叉查找树的树高度影响了查找的效率,需要尽量减小树的高度,AVL树正是这样的树. 一.AVL树介绍 AVL树是一棵严格自平衡的二叉查找树,1962年,发明者Adelson-Velsky和La ...

  6. 打印图片的属性和实现另存图片功能以及使用numpy

    上一篇我们已经学了如何读取图片的功能了以及和opencv的环境搭建了,今天接着来学习,哈哈哈,今天刚好五一,也没闲着,继续学习. 1. 首先我们来实现打印出图片的一些属性功能, 先来看一段代码: im ...

  7. Python 分析后告诉你闲鱼上哪些商品抢手？

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:[Airpython] PS:如有需要Python学习资料的小伙伴可以 ...

  8. 数据结构与算法--树(tree)结构

    树 二叉树 遍历原则:前序遍历是根左右, 中序遍历是左根右,后序遍历是左右根. 二叉搜索树 特点:对于树中的每个节点X,它的左子树中所有节点的值都小于X,右子树中所有节点的值都大于X. 遍历:采取二叉 ...

  9. vscode 使用记录

    快捷键 Cmd+P 查找最近的文件 Ctrl+cmd + P 打开命令面板 Ctrl+tab文件间切换 Ctrl+` 打开终端 Cmd +b 隐藏侧边栏 VScode对多行编辑有两种模式 第一种模式 ...

  10. 挑战全网最幽默的Vuex系列教程：第五讲 Vuex的小帮手

    先说两句 前面已经讲完了 Vuex 下的 State.Getter.Mutation 及 Action 这四驾马车,不知道大家是否已经理解.当然,要想真正熟练掌握的话,还是需要不断的练习和动手实践才行 ...