Chinaunix首页 | 论坛 | 博客

学习 Linux

首页　| 　博文目录　| 　关于我

redsong

  • 博客访问： 7698
  • 博文数量： 14
  • 博客积分： 10
  • 博客等级： 民兵
  • 技术积分： 150
  • 用 户 组： 普通用户
  • 注册时间： 2011-02-25 22:56
文章分类

全部博文（14）

推荐博文
一个复选框控制多个复选框

分类： jQuery

2014-08-24 21:30:15



这个太常见了。


点击(此处)折叠或打开

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <!-- 新 Bootstrap 核心 CSS 文件 -->
  7. <link rel="stylesheet" href="">

  9. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  10. <link rel="stylesheet" href="">

  12. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  13. <script src=""></script>

  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src=""></script>
  17. </head>
  18. <body>
  19. <div class="row">
  20.     <div class="col-md-6 col-md-offset-3">
  21.         <input type="checkbox" class="test1" name="name1"><br>
  22.         <input type="checkbox" class="test1" name="name1"><br>
  23.         <input type="checkbox" class="test1" name="name1"><br>
  24.         <input type="checkbox" class="test1" name="name1"><br>
  25.         <input type="checkbox" class="test1" name="name1"><br>
  26.         <input type="checkbox" class="test1" name="name1"><br>
  27.         <hr>
  28.         <input type="checkbox" class="test2" name="name2"><br>
  29.     
  30.     </div>
  31. </div>


  34. <script>
  35. $(document).ready(function(){
  36.     var x = $('input:checkbox[name="name2"]');        //总控制的复选框
  37.     var y = $('input:checkbox[name="name1"]');        //一大串复选框

  39.     //总控制的复选框发生变化
  40.     x.change(function(e) {
  41.         if(x.is(':checked')){
  42.             //如果变化是选中
  43.              y.prop('checked',true);    //把一大串都选择上
  44.         }
  45.         else{
  46.             //如果变化是取消
  47.              y.prop('checked',false);    //把一大串都取消选择
  48.         }
  49.     });

  51.     
  52.     //一大串的复选框中的一个发生变化的时候
  53.     y.change(function(e) {
  54.         if($(this).is(':checked')){
  55.             //如果这个变化是选中
  56.                 if(y.length == $('input:checkbox[name="name1"]:checked').length){
  57.                 //如果一大串的复选框的数量 等于 一大串的复选框中选中的数量 （简单说就是都选中了）
  58.                 x.prop('checked',true);    //把总控制的那个复选框也选中
  59.             }
  60.         }
  61.         else{
  62.             //如果这个变化不是选中（那么一定是取消）
  63.             x.prop('checked',false);    //把总控制的那个复选框取消掉选择
  64.         }
  65.     });
  66.     
  67. });
  68. </script>
  69. </body>
  70. </html>

阅读(282) | 评论(0) | 转发(0) |
0

上一篇：点击不同的菜单 出现不同的div

下一篇：没有了

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6