jquery实现全选、全不选以及单选功能


Posted in jQuery onMarch 23, 2017

效果图:

jquery实现全选、全不选以及单选功能

代码如下:

<link rel="stylesheet" href="http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css" rel="external nofollow" >
 <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 </script>
<table class="table table-bordered ">
 <thead class="tab_head">
 <tr>
  <td> <input type="checkbox" onclick="selectAll()"></td>
  <th>角色名称</th>
  <th>角色说明</th>
  <th>所属系统</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td> <input type="checkbox"></td>
  <td>系统管理员</td>
  <td>管理员角色</td>
  <td>武进公安平台</td>
 </tr>
 <tr>
  <td> <input type="checkbox"></td>
  <td>系统管理员</td>
  <td>管理员角色</td>
  <td>武进公安平台</td>
 </tr>
 <tr>
  <td> <input type="checkbox"></td>
  <td>系统管理员</td>
  <td>管理员角色</td>
  <td>武进公安平台</td>
 </tr>
 </tbody>
 </table>
 <script>
 function selectAll(){
 $("input[type='checkbox']").each( function() {
  if($(this).prop("checked")==true) {
  $("input[type='checkbox']").prop('checked', true);
  return;
  } else {
  $("input[type='checkbox']").prop('checked', false);
  return;
  }
 });
 }
 </script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 #jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 #jQuery
You might like
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php 学习资料零碎东西
2010/12/04 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
django模板结构优化的方法
2019/02/28 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Pandas之缺失数据的实现
2021/01/06 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
企业治理工作自我评价
2013/09/26 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
小平小道观后感
2015/06/09 职场文书
重阳节活动主持词
2015/07/04 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python