<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="jquery-3.2.1.js"></script>

 </head>

 <body>

     <button onclick="changeall()">正选</button>

     <button onclick="reverse()">反选</button>

     <button onclick="cancel()">取消</button>

     <table border="5">

         <tr>

             <td>111</td>

             <td><input type="checkbox" class="box"></td>

         </tr>

         <tr>

             <td>222</td>

             <td ><input type="checkbox" class="box"></td>

         </tr>

         <tr>

             <td>333</td>

             <td><input type="checkbox" class="box"></td>

         </tr>

         <tr>

             <td>444</td>

             <td ><input type="checkbox" class="box"></td>

         </tr>

     </table>

 <script>

     function changeall() {

         $("table input").each(function () {                   //找到input标签后进行遍历 把所有的input都加上checked 选中状态

             $(this).prop("checked",true);

         })

     }

     function cancel() {                                       //找到input标签后进行遍历 把所有的input都取消checked状态

         $("table input").each(function () {

             $(this).prop("checked",false);

         })

     }

     function reverse() {

         $("table input").each(function () {                    //遍历循环input

             if ($(this).prop("checked")){                       // 如果有checked

                 $(this).prop("checked",false);                 // 用false取消

             }

             else {                                             //如果没有

                 ($(this).prop("checked", true));               //加上checked状态

             }

         })

     }

 </script>

 </body>

 </html>

用jquery来实现正反选选择框checkbox的小示例的更多相关文章

  1. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  2. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  3. jquery如何实现动态增加选择框

    jquery如何实现动态增加选择框 一.总结 一句话总结:用jquery的clone(true)方法. 1.如何在页面中复制amazeui加了特效的标签? amazeui中的控件带js方法,不知道那部 ...

  4. jquery下的正反选操作

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

  5. [jQuery编程挑战]004 针对选择框词典式排序

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

  6. input 选择框改变背景小技巧

    最近在项目中遇到一个问题,想要改变input选择框的背景,然而,令我没有想到的是,竟然无法直接改变背景的颜色 通常情况下:我们都可以通过改变元素的 background-color 的值来改变元素的背 ...

  7. JQuery Mobile - 动态修改select选择框的选中项

    <label for="day">选择天</label> <select name="day" id="day" ...

  8. jQuery 全选 正反选

    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript&quo ...

  9. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

随机推荐

  1. "window.location.href"、"location.href"是本页面跳转

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  2. 题解 P2550 【[AHOI2001]彩票摇奖】

    题目链接 大家有没有发现数据范围好小呀 我们只需要开7~8的数组就好!! 中间比较的时候懒得用for循环比较了.直接爆搜. 废话不多说,直接上代码. #include<bits/stdc++.h ...

  3. [Swift]八大排序算法（四）：堆排序

    排序分为内部排序和外部排序. 内部排序:是指待排序列完全存放在内存中所进行的排序过程,适合不太大的元素序列. 外部排序:指的是大文件的排序,即待排序的记录存储在外存储器上,待排序的文件无法一次装入内存 ...

  4. 【spring cloud】源码分析（一）

    概述 从服务发现注解 @EnableDiscoveryClient入手,剖析整个服务发现与注册过程 一,spring-cloud-common包 针对服务发现,本jar包定义了 DiscoveryCl ...

  5. 下载azure website的code

    1.登陆kudu直接下载. http://www.concurrency.com/blog/use-azure-kudu-debug-azure-websites/ 2.FTP链接拷贝(可以忽略) 3 ...

  6. postgreSQL PL/SQL编程学习笔记（五）——触发器(Triggers)

    Trigger Procedures PL/pgSQL can be used to define trigger procedures on data changes or database eve ...

  7. win7关闭关机时的自动终止的功能

    gpedit.msc->计算器配置->管理模板->系统->关机选项->启用 参考: http://www.xitongcheng.com/jiaocheng/win7_a ...

  8. C# 获取类中属性注释值

    转 http://bbs.csdn.net/topics/350019800 PropertyInfo[] peroperties = typeof(TEST).GetProperties(Bindi ...

  9. TextInput

    TextInput /** TextInput 是一个允许用户在应用中通过键盘输入文本的基本组件* 本组件的属性提供了多种特性的配置,如自动完成,自动大小写,占位文字,键盘类型等* 常用:* plac ...

  10. Python之逻辑运算符

    这一小节我在动笔之前犹豫到底要不要动手写,虽然简单但是防止遗忘,博主还是决定记录一下.Python中运算符主要分为算术运算符,赋值运算符,比较运算符,逻辑运算符以及成员运算符.下面详细记录这5种运算符 ...