<!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. C#导出Excel-利用特性自定义数据

    网上C#导出Excel的方法有很多.但用来用去感觉不够自动化.于是花了点时间,利用特性做了个比较通用的导出方法.只需要根据实体类,自动导出想要的数据  1.在NuGet上安装Aspose.Cells或 ...

  2. NSTimeZone时区

    前言 NSTimeZone 表示时区信息. 1.NSTimeZone 时区的创建 NSTimeZone *zone1 = [[NSTimeZone alloc] init]; // 根据时区名称创建 ...

  3. char *p="abc" 与 char p[]="abc" 的区别

    本文来源于网络 出处:点我 有这样一段代码: #include "stdio.h" char *get_string_1() { char p[] = "hello wo ...

  4. 题解 P1255 【数楼梯】

    题目链接 好吧,承认python 轻松水过 代码奉上: n = int(input()) #定义,输入 a=1 #初始的变量赋值 b=1 n-=1 #我的毒瘤的循环不得不加上这句话 if n > ...

  5. 如何用python批量翻译文本?

    首先,看一下百度翻译的官方api文档. http://api.fanyi.baidu.com/api/trans/product/apidoc # coding=utf-8 #authority:bi ...

  6. ionic中文教程[来自皓眸大前端]

    做前端的同学有福了,学完比较热火的angular,你就可以开始动手做静态的WebApp了,这是多么幸福的一件事啊.静态的WebApp,你可以做任何的Demo,甚至可以做一些通关小游戏这个先不谈.做完了 ...

  7. ubuntu下QtCreator启动无响应问题解决

    打开Qt后就卡死. 解决方法:删除系统配置目录下的QtProject文件夹: find / -name QtProject 输出: /root/.config/QtProject 删除QtProjec ...

  8. Linux下命令别名配置

    在~/.bashrc文件中添加相关命令别名内容,可以降低风险操作 1. vim ~/.bashrc alias rm='rm -i' alias cp='cp -i' alias mv='mv -i' ...

  9. JavaWeb学习笔记（三）—— Servlet

    一.Servlet概述 1.1 什么是Servlet Servlet是是sun公司提供一套规范(接口),是JavaWeb的三大组件之一(Servlet.Filter.Listener),它属于动态资源 ...

  10. vi vim 查找替换

    #查找# / 光标向下查找 ?光标向上查找 按键盘n,继续查找 #替换# :s/hello/test/ 替换光标所在行第一个hello为test :s/hello/test/g  替换光标所在行所有h ...