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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jquery轮播图插件使用方法详解
Jul 31 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Python实现时间序列可视化的方法
2019/08/06 Python
详解python中eval函数的作用
2019/10/22 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
金士达面试非笔试
2012/03/14 面试题
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
教师找工作推荐信
2013/11/23 职场文书
大学班级计划书
2014/04/29 职场文书
体育之星事迹材料
2014/05/11 职场文书
个人担保书格式范文
2014/05/12 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python