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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
document.getElementById介绍
2011/09/13 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python3 求约数的实例
2019/12/05 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
简历中的自我评价怎么写
2014/01/29 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
小兵张嘎观后感
2015/06/03 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
Jsonp劫持学习
2021/04/01 PHP
Python绘画好看的星空图
2022/03/17 Python