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日历价格、库存等设置插件
Jul 05 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
js面向对象的写法
2016/02/19 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python之yield表达式学习
2014/09/02 Python
深入学习python的yield和generator
2016/03/10 Python
python去除扩展名的实例讲解
2018/04/23 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
简单了解python元组tuple相关原理
2019/12/02 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
运动会解说词50字
2014/01/18 职场文书
物理力学求职信
2014/02/18 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
成都人事代理协议书
2014/10/25 职场文书
实习介绍信范文
2015/05/05 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
基于Python实现射击小游戏的制作
2022/04/06 Python
netty 实现tomcat的示例代码
2022/06/05 Servers
教你nginx跳转配置的四种方式
2022/07/07 Servers