jQuery菜单实例(全选,反选,取消)


Posted in jQuery onAugust 28, 2017

废话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="全选" onclick="checkAll()">
  <input type="button" value="反选" onclick="reverseAll()">
  <input type="button" value="取消" onclick="cancleAll()">
  <table border="1">
    <thead>
      <tr>
        <th>选择</th>
        <th>IP</th>
        <th>端口</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
    </tbody>

  </table>
  <script type="text/javascript" src='jquery-3.2.1.js'></script>
  <script type="text/javascript">
    function checkAll(){
      $(':checkbox').prop('checked',true);
    }
    function cancleAll() {
      $(':checkbox').prop('checked',false);
    }
    function reverseAll(){
      $(':checkbox').each(function(){
        var v = $(this).prop('checked')? false:true;  /*三元运算: var v = 条件? 真值:假值*/
        $(this).prop('checked',v)
      })
    }
  </script>
</body>
</html>

以上这篇jQuery菜单实例(全选,反选,取消)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
jQuery Position方法使用和兼容性
Aug 23 #jQuery
You might like
yii2简单使用less代替css示例
2017/03/10 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
JavaScript经典案例之简易计算器
2020/08/24 Javascript
Python备份Mysql脚本
2008/08/11 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python实现堆栈与队列的方法
2015/01/15 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python中functools模块的常用函数解析
2016/06/30 Python
详解django2中关于时间处理策略
2019/03/06 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
结婚保证书
2015/01/16 职场文书
裁员通知
2015/04/25 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
redis实现排行榜功能
2021/05/24 Redis
Java 多线程并发FutureTask
2022/06/28 Java/Android