<!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. DDD模式

    http://www.cnblogs.com/landeanfen/p/4816706.html https://www.cnblogs.com/malaoko/p/8732552.html

  2. django中给ajax提交加上csrf

    代码来自djangoproject网站 在html中的script标签下插入下面代码 在html文档加载时候运行下面代码,并且使用$.ajaxSetup设置ajax每次调用时候传入的数据,$.ajax ...

  3. 在makefile通过宏定义来控制源程序的编译

    在Makefile中我们可以通过宏定义来控制源程序的编译.只要在Makefile中的CFLAGS中通过选项-D来指定你于定义的宏即可. 如:CFLAGS += -D _XXX在编译的时候加上此选项就可 ...

  4. Qt 学习之路 2（64）：使用 QJsonDocument 处理 JSON

    Home / Qt 学习之路 2 / Qt 学习之路 2(64):使用 QJsonDocument 处理 JSON Qt 学习之路 2(64):使用 QJsonDocument 处理 JSON  豆子 ...

  5. python之time和datetime的常用方法

    python之time和datetime的常用方法   一.time的常用方法: import time,datetime # 时间有三种展现方式:时间戳,时间元组,格式化的时间print(time. ...

  6. LeetCode154.寻找旋转排序数组中的最小值 II

    154.寻找旋转排序数组中的最小值 II 描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). ...

  7. Celery 大量任务 分发

    Celery是由Python开发的一个简单.灵活.可靠的处理大量任务的分发系统,它不仅支持实时处理也支持任务调度. user:用户程序,用于告知celery去执行一个任务. broker: 存放任务( ...

  8. gym101964G Matrix Queries seerc2018g题 数学归纳法+线段树（递归）

    题目传送门 题目大意: 给出2^k大小的白色矩形,q次操作,每次将一行或者一列颜色反转,问总体矩阵的价值,矩阵的价值定义是,如果整个矩阵颜色相同,价值为1,否则就把这个矩阵切成四份,价值为四个小矩阵的 ...

  9. ZOJ Monthly, January 2019 Little Sub and his Geometry Problem ZOJ4082(模拟 乱搞)

    在一次被自己秀死... 飞机 题目: 给出N,K, Q; 给出一个N*N的矩阵  , 与K个特殊点 , 与Q次查询 , 每次查询给出一个C , 问 在这个N*N矩阵中 , 有多少的点是满足这样的一个关 ...

  10. 用淘宝镜像安装electron的方法

    在网友那里看到的,命令如下,亲测安装electron 1.7.9 成功,关键是几秒钟就搞定了.今天是 11 Dec 2017. ELECTRON_MIRROR=http://npm.taobao.or ...