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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
Jquery-data的三种用法
Apr 18 jQuery
Jquery获取radio选中的值
May 05 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 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
个人站长制做网页常用的php代码
2007/03/03 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
javascript操作css属性
2013/12/30 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
python日志记录模块实例及改进
2017/02/12 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python实现数据写入excel表格
2018/03/25 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
元旦获奖感言
2014/03/08 职场文书
2015年人事科工作总结
2015/04/28 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
python字符串常规操作大全
2021/05/02 Python
5行Python代码实现一键批量扣图
2021/06/29 Python
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL