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源码】
May 13 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery实现影院选座订座效果
Apr 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自定义错误处理用法实例
2015/03/20 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
微信跳一跳python自动代码解读1.0
2018/01/12 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
python如何编写win程序
2020/06/08 Python
华为python面试题
2016/05/03 面试题
大学生的自我鉴定范文
2014/01/21 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
党课培训主持词
2014/04/01 职场文书
计算机软件专业求职信
2014/06/10 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
php解析非标准json、非规范json的方式实例
2022/05/10 PHP