爱好选择器练习

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5     <title>全选练习</title>
  6 </head>
  7 <body>
  8 
  9 <form>
 10     你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
 11 
 12     <br/>
 13     <input type="checkbox" name="items" value="足球"/>足球
 14     <input type="checkbox" name="items" value="篮球"/>篮球
 15     <input type="checkbox" name="items" value="羽毛球"/>羽毛球
 16     <input type="checkbox" name="items" value="乒乓球"/>乒乓球
 17     <br/>
 18     <input type="button" id="checkedAllBtn" value="全　选"/>
 19     <input type="button" id="checkedNoBtn" value="全不选"/>
 20     <input type="button" id="checkedRevBtn" value="反　选"/>
 21     <input type="button" id="sendBtn" value="提　交"/>
 22 </form>
 23 
 24 <script src="js/jquery-1.10.1.js"></script>
 25 <script type="text/javascript">
 26     /*
 27      功能说明:
 28      1. 点击'全选': 选中所有爱好
 29      2. 点击'全不选': 所有爱好都不勾选
 30      3. 点击'反选': 改变所有爱好的勾选状态
 31      4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
 32      5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
 33      6. 点击'提交': 提示所有勾选的爱好
 34      */
 35 //    获取全选全不选的复选框
 36     var $checkedAllBox = $('#checkedAllBox');
 37 //    获取所有爱好
 38     var $items = $(':checkbox[name=items]');
 39     //var $items= $(':checkbox').filter('[name=items]');
 40 
 41 
 42 //       1. 点击'全选': 选中所有爱好
 43     $('#checkedAllBtn').click(function () {
 44       $items.prop('checked',true);
 45       $checkedAllBox.prop('checked',true);
 46     });
 47     
 48 //     2. 点击'全不选': 所有爱好都不勾选
 49     $('#checkedNoBtn').click(function () {
 50         $items.prop('checked',false);
 51         $checkedAllBox.prop('checked',false);
 52     })
 53     
 54     
 55 //    3. 点击'反选': 改变所有爱好的勾选状态
 56     $('#checkedRevBtn').click(function () {
 57 //     因为每个复选框当前的状态不同   所以需要单独判断每个的选中状态    不能使用隐式遍历
 58 //        在each方法中  this指向当前每次拿出来的那个dom
 59         $items.each(function () {
 60           this.checked = !this.checked;
 61         })
 62 //      如果当前选中的复选框个数和总个数相等  就应该更新全选/全不选的状态为选中
 63 //        获得选中的复选框集合
 64 //        var checkedList = $(':checkbox[name=items]:checked');
 65 //        if($items.length === checkedList.length){
 66 ////         能进这个判断 就说明选中个数和总个数相等了   说明全选中
 67 //            $checkedAllBox.prop('checked',true);
 68 //        }else{
 69 ////            到了else里边 说明不是全不选中
 70 //            $checkedAllBox.prop('checked',false);
 71 //        }
 72 //        $checkedAllBox.prop('checked',$items.filter(':checked').length === $items.length);
 73 //        不选中的长度为0  也是全选
 74         $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);
 75     });
 76     
 77     
 78 //    5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
 79     $items.click(function () {
 80         $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);
 81     });
 82     
 83     
 84 //    4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
 85     $checkedAllBox.click(function () {
 86       //    一旦点击了全选/全不选的这个按钮   它的状态就要设置给所有的爱好复选框
 87         $items.prop('checked',this.checked);
 88     });
 89     
 90     
 91 //    6. 点击'提交': 提示所有勾选的爱好
 92     $('#sendBtn').click(function () {
 93       $items.filter(':checked').each(function () {
 94         alert(this.value);
 95 //        alert($(this).val());
 96       })
 97     })
 98 
 99 
100 </script>
101 </body>
102 
103 </html>
猜你喜欢
