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

发布时间:2017-03-30 19:16:48 编辑:站点网

jq,使用jQuery 前先引入 jq:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <input type="checkbox" value="全选" id="ckAll"/>水果</br>
 <p class="box">
  <input type="checkbox" value="苹果" id="apple"/>苹果
  <input type="checkbox" value="香蕉" id="bann"/>香蕉
  <input type="checkbox" value="橘子" id="origin"/>橘子
 </p> 
 <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>
                
更多相关内容:
    无相关信息
[!--temp.cy--]