<!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. Jenkins 自动化部署asp.net

    使用步骤 1.安装jenkins.git和vs,并确保机器上安装了.net framework 4.5和.net framework4.0 ,完成后访问http://localhost:8080. 2 ...

  2. fiddler 代理调试本地手机页面

    https://www.cnblogs.com/zichi/p/4944581.html

  3. 墨菲定律与 IndexOutOfBoundsException(数组越界异常)

    今天维护又反馈了一问题过来,查询试卷时报数组越界异常: 2017-02-28 10:45:24,827[ERROR] HttpException[10.32.111.7:60446:2D07867BE ...

  4. VS2010设置默认浏览器

    1.选择项目中起始页右键,然后选择浏览方式 2.然后就可以设置默认浏览器了

  5. python函数作用域，闭包，装饰器

    第一:函数作用域: L:local 函数内部作用域 E:enclosing       函数内部与内嵌函数之间(闭包) G:global            全局作用域 B:build_in    ...

  6. mybatis学习笔记（五）：mybatis 逆向工程

    mybatis学习笔记(五):mybatis 逆向工程 在日常开发中,如果数据库中存在多张表,自己手动创建 多个pojo 类和编写 SQL 语法配置文件,未免太过繁琐,mybatis 也提供了一键式生 ...

  7. centos7 docker 安装 mysql5.7.24 导入12G的sql

    先在CentOS7里面安装docker Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker .通过 uname - ...

  8. js 三大家族之offset

    JS中的offset家族: 一.offsetWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽高 ...

  9. 洛谷 P1111 修复公路（最小生成树）

    嗯... 题目链接:https://www.luogu.org/problemnew/show/P1111 这道题的关键是读懂题: 首先根据题中的一些扎眼的字眼我们可以判断这是一道用最小生成树来做的题 ...

  10. nginx关闭默认站点/空主机头（禁止IP直接访问、防止域名恶意解析）

    监控时做了负载均衡,所以只能让nginx指定域名访问,那我们就可以防止因为域名不对跳到默认的页面去. curl  -I   -H  “host:域名”   --include   https://19 ...