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 dataTable 获取某行数据
May 05 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现放大镜案例
Oct 19 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
优化使用mysql存储session的php代码
2008/01/10 PHP
php fckeditor 调用的函数
2009/06/21 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
一个JS翻页效果
2007/07/23 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
python实现图书管理系统
2018/03/12 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python读取图片任意范围区域
2019/01/23 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
pycharm配置git(图文教程)
2019/08/16 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
在线课程:Skillshare
2019/04/02 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
班主任新年寄语
2014/04/04 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript