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 相关文章推荐
jQuery Plupload上传插件的使用
Apr 19 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery中库的引用方法
Jan 06 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery实现购物车全功能
Jan 11 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
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Python timeit模块原理及使用方法
2020/10/10 Python
Python中Yield的基本用法
2020/10/18 Python
Python os库常用操作代码汇总
2020/11/03 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
文史专业毕业生自荐信
2013/11/17 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
交通安全寄语大全
2014/04/08 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
Python Matplotlib库实现画局部图
2021/11/17 Python