js, jQuery实现全选、反选功能


Posted in Javascript onMarch 08, 2017

js ,jq实现全选、反选功能:

js:思路:1.点击全选按钮实现,下面内容全选,与反选 2.下面有一个没有选中时,全选按钮不勾选,当全部选中时才全选。这里引入一个计数器,来判断是否全部选中。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 全选<input type="checkbox" name="allchoose" id="box" onclick="chk()"/>
 <div id="lower">
  苹果<input type="checkbox" name="apple" id="apple"/>
  香蕉<input type="checkbox" name= "banner" id="banner" />
  橘子<input type="checkbox" name="origin" id="origin"/>
 </div>
 <script type="text/javascript">
  var box = document.getElementById("box");
  var lb = document.getElementById("lower");
  var lber = lb.getElementsByTagName("input");
 //全选,反选
 box.onclick = function(){
  if(this.checked){
  for(var i=0;i<lber.length;i++){
   lber[i].checked = true;
  }
  }else{
  for(var i=0;i<lber.length;i++){
   lber[i].checked = false;
  }
  }
 }
 //下面全选后,全选框才勾上
 for(var i=0;i<lber.length;i++){
  lber[i].onclick = function(){
  //引入计数器sum
  var sum = 0;
  for(var j=0;j<lber.length;j++){
   if(lber[j].checked){
   sum += 1;
   if(sum == lber.length){
    box.checked = true;
   } else {
    box.checked = false;
   }
   }
  }
  }
 }
 </script>
 </body>
</html>

jq,使用jQuery 前先引入 jq:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <input type="checkbox" value="全选" id="ckAll"/>水果</br>
 <div class="box">
  <input type="checkbox" value="苹果" id="apple"/>苹果
  <input type="checkbox" value="香蕉" id="bann"/>香蕉
  <input type="checkbox" value="橘子" id="origin"/>橘子
 </div> 
 <script src="js/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">


 //给所有 .box input 元素添加 checked = ckAll 当前的状态;



 //prop('checked',value) ,第一个值获取属性,第二个值:设置属性值。prop只有一个参数时,表示获取元素属性。



  $('#ckAll').click(function(){





 $('.box input').prop('checked',$(this).prop('checked'));
  });
  $('.box input').click(function(){
  //each 便利每一个元素,让其执行该函数
  $('.box input').each(function(){
   if(!$(this).prop('checked')){
   $('#ckAll').prop('checked',false);
   //有一个不满足就 跳出该循环,避免执行下面
   return false;
   }else{
   $('#ckAll').prop('checked',true);
   }
  })
  })</script>
 </body>
</html>

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

Javascript 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 #Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 #Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 #Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 #Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 #Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 #Javascript
JS仿JQuery选择器功能
Mar 08 #Javascript
You might like
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python的列表List求均值和中位数实例
2020/03/03 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
2014学年自我鉴定
2014/02/23 职场文书
公务员保密承诺书
2014/03/27 职场文书
施工安全标语
2014/06/07 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android