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实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python比较两个列表大小的方法
2015/07/11 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python基于http下载视频或音频
2018/06/20 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python 如何实现访问者模式
2020/07/28 Python
Spy++的使用方法及下载教程
2021/01/29 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
表扬稿范文
2015/01/17 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Python入门之基础语法详解
2021/05/11 Python
浅谈MySQL函数
2021/10/05 MySQL
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers