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+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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插入排序实现代码
2013/04/04 PHP
php5.3 注意事项说明
2013/07/01 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
家具促销活动方案
2014/02/16 职场文书
建房协议书
2014/04/11 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
音乐研修感悟
2015/11/18 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
Python实现科学占卜 让视频自动打码
2022/04/09 Python