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 Form轻松实现文件上传
May 24 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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
COM in PHP (winows only)
2006/10/09 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
python传递参数方式小结
2015/04/17 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python引用模块和查找模块路径
2016/03/17 Python
python妙用之编码的转换详解
2017/04/21 Python
Python算法之图的遍历
2017/11/16 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
keras 多任务多loss实例
2020/06/22 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
办公室前台岗位职责
2014/01/04 职场文书
上班早退检讨书
2014/01/09 职场文书
公立医院改革实施方案
2014/03/14 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书