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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
Node.js Event Loop各阶段讲解
Mar 08 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
js实现计时器秒表功能
Dec 16 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
基于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
简单的页面缓冲技术
2006/10/09 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php微信公众号开发之简答题
2018/10/20 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
Python迭代和迭代器详解
2016/11/10 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
人事文员岗位职责
2014/02/16 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
励志演讲稿600字
2014/08/21 职场文书
合伙经营协议书范本
2014/09/13 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
八年级作文之感恩
2019/11/22 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript