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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jquery实现简单每周轮换的日历
Sep 10 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
德生PL660的电路分析和打磨
2021/03/02 无线电
php使用codebase生成随机数
2014/03/25 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP中文乱码解决方案
2015/03/05 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
Python找出list中最常出现元素的方法
2016/06/14 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
用python批量移动文件
2021/01/14 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
中英文自我评价语句
2013/12/20 职场文书
七年级生物教学反思
2014/01/30 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
百年孤独读书笔记
2015/06/29 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python