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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jquery拖动改变div大小
Jul 04 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery中event.target和this的区别详解
Aug 13 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中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
php类常量用法实例分析
2015/07/09 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python深入学习之对象的属性
2014/08/31 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Tensorflow 实现释放内存
2020/02/03 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
华为慧通面试题
2012/09/11 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
旗帜观后感
2015/06/08 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL