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 tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现放大镜案例
Oct 19 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
利用Python实现网络测试的脚本分享
2017/05/26 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
解决python replace函数替换无效问题
2020/01/18 Python
建筑专业自我鉴定
2013/10/22 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
新农村建设标语
2014/06/24 职场文书
党员自我剖析材料
2014/08/31 职场文书
中秋晚会活动方案
2014/08/31 职场文书
股东授权委托书范本
2014/09/13 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL