脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js, jQuery实现全选、反选功能

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

 更新时间：2017年03月08日 09:20:31   作者：虔诚_k  
本文主要介绍了js, jQuery实现全选、反选功能的方法，具有很好的参考价值。下面跟着小编一起来看下吧

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • IE浏览器PNG图片透明效果代码

    IE浏览器PNG图片透明效果代码

    平常，我们经常使用Gif格式的图片以保持图片在浏览器中透明，以支持底色。但由于IE浏览器本身的原因，我们无法使透明的PNG图片透明起来。那么，如何将它在IE浏览器下变得透明呢？
    2008-09-09
  • JavaScript访问样式表代码

    JavaScript访问样式表代码

    在web页面中，我们经常需要通过修改样式（style）来达到更好的用户体验，需要的朋友可以参考下。
    2010-10-10
  • 详解开源的JavaScript插件化框架MinimaJS

    详解开源的JavaScript插件化框架MinimaJS

    这篇文章主要介绍了开源的JavaScript插件化框架MinimaJS的详解,详细的介绍了MinimaJS的使用，具有一定的参考价值，有兴趣的可以了解一下
    2017-10-10
  • IE浏览器打印的页眉页脚设置解决方法

    IE浏览器打印的页眉页脚设置解决方法

    IE浏览器打印的页眉页脚设置解决方法
    2009-12-12
  • JavaScript 上传文件限制参数案例详解

    JavaScript 上传文件限制参数案例详解

    这篇文章主要介绍了JavaScript 上传文件限制参数案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • javascript判断css3动画结束 css3动画结束的回调函数

    javascript判断css3动画结束 css3动画结束的回调函数

    本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束，主要是使用了javascript的回调函数，其思路是一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持，非常的简单实用，推荐给大家。
    2015-03-03
  • 微信小程序用canvas实现圆形进度条

    微信小程序用canvas实现圆形进度条

    这篇文章主要为大家详细介绍了微信小程序用canvas实现圆形进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序实现导航功能的操作步骤

    微信小程序实现导航功能的操作步骤

    这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • trackingjs+websocket+百度人脸识别API实现人脸签到

    trackingjs+websocket+百度人脸识别API实现人脸签到

    这篇文章主要介为大家详细绍了trackingjs+websocket+百度人脸识别API实现人脸签到功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 基于JS制作一个简易的2048游戏

    基于JS制作一个简易的2048游戏

    这篇文章主要介绍了如何利用JS编写一个简单的2048小游戏,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05

最新评论