<!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. NSArray 数组

    前言 数组只能存储 OC 对象,不能存储 C 语言中的基本数据类型,也不能存储 nil . Xcode 7 对系统中常用的一系列容器类型都增加了泛型支持(),有了泛型后就可以指定容器类中对象的类型了. ...

  2. Linux环境下mysql安装并配置远程访问

    环境:centOS 1.下载mysql安装文件 [root@localhost ~]# wget http://dev.mysql.com/get/mysql-community-release-el ...

  3. WebGL学习之法线贴图

    实际效果请看demo:纹理贴图 为了增加额外细节,提升真实感,我们使用了漫反射贴图和高光贴图,它们都是向三角形进行附加纹理.但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面.以光照算法的视角 ...

  4. Flink学习笔记：Operators之Process Function

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  5. 'javac' 不是内部或外部命令,也不是可运行的程序

    win10 系统下'javac' 不是内部或外部命令,也不是可运行的程序 1.在系统变量下面配置 JAVA_HOME:你自己的jdk的路径 CLASSPATH= .;%JAVA_HOME%libdt. ...

  6. 单据头->实体服务规则中根据单据类型设置可见性或必录等

  7. 11、C内存四区模型

    转载于:https://blog.csdn.net/wu5215080/article/details/38899259 内存四区模型 图1.内存四区模型流程说明1.操作系统把物理硬盘代码load到内 ...

  8. pyhton学习，day1作业，用户名密码登录模块

    要求,通过用户名密码登录,登录错误3次,锁定用户名 # coding=utf-8 # Author: RyAn Bi import os, sys #调用系统自己的库 accounts_file = ...

  9. js定时器的结束和开始

    今天在做一个页面的报表的时候,需要在报表内容改变后屏蔽掉页面上的一些选择框. 因为这个报表是自身的链接实现的改变,我只能读取到history改变了,基于这个来判断 我写了一个判断条件,然后将他放在了一 ...

  10. POJ 2983 M × N Puzzle

    M × N Puzzle Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 4860   Accepted: 1321 Des ...