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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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 PDO数据库操作预处理与注意事项
2019/03/16 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
vue实现登录拦截
2020/06/29 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Django异步任务线程池实现原理
2019/12/17 Python
opencv+python实现均值滤波
2020/02/19 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
单位创先争优活动方案
2014/01/26 职场文书
教师求职自荐书
2014/06/14 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
超市创业计划书
2014/09/15 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书