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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Python入门篇之对象类型
2014/10/17 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
解决Python requests 报错方法集锦
2017/03/19 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python根据服务获取端口号的方法
2019/09/25 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Django实现简单的分页功能
2021/02/22 Python
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
主治医师岗位职责
2013/12/10 职场文书
会计辞职信范文
2014/01/15 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
集中采购方案
2014/06/10 职场文书
协议书范文
2015/01/27 职场文书
班主任高考寄语
2015/02/26 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
python 网络编程要点总结
2021/06/18 Python
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers