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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery弹框插件使用方法详解
May 26 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
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
python strip()函数 介绍
2013/05/24 Python
Python中取整的几种方法小结
2017/01/06 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python实现两个文件合并功能
2018/04/01 Python
python对象与json相互转换的方法
2019/05/07 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
写给女朋友的检讨书
2014/01/28 职场文书
甘南现象心得体会
2014/09/11 职场文书
爱心捐书倡议书
2015/04/27 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript