全选，全不选，反选的js实现
全选练习
** 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中
* 创建一个页面
** 复选框和按钮
- 四个复选框表示爱好
- 还有一个复选框操作 全选和选不选，也有一个事件
** 三个按钮，分别有事件
- 全选
- 全不选
- 反选
* 全选操作
</head> <body> <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选 <br/> <input type="checkbox" name="love"/>篮球 <input type="checkbox" name="love"/>排球 <input type="checkbox" name="love"/>羽毛球 <input type="checkbox" name="love"/>乒乓球 <br/> <input type="button" value="全选" onclick="selAll();"/> <input type="button" value="全不选" onclick="selNo();"/> <input type="button" value="反选" onclick="selOther();"/> <script type="text/javascript"> //实现全选和全不选 function selAllNo() { /* 1、得到上面那个复选框 - 通过id获取到 2、判断这个复选框是否是选中 - if条件，checked==true 3、如果是选中，下面是全选 4、如果不是选中，下面是全不选 */ //得到上面复选框 var box1 = document.getElementById("boxid"); //判断这个复选框是否是选择 if(box1.checked == true) { //是选择状态 //调用全选方法 selAll(); } else { //不是选中状态 //调用全不选方法 selNo(); } } //实现反选的操作 function selOther() { /* 1、获取到要操作的复选框 2、返回数组，遍历数组 3、得到每一个复选框 4、判断当前的复选框是选中还是不选中 - if(love1.checked == true) {} 5、如果选中，属性checked设置成false，否则，设置成true */ //获取要操作的复选框 var loves11 = document.getElementsByName("love"); //遍历数组 for(var a=0;a<loves11.length;a++) { //得到每一个复选框 var love11 = loves11[a]; //判断当前这个复选框是什么状态 if(love11.checked == true) { //是选中的状态 //设置checked=false love11.checked = false; } else { //是不选中的状态 //把checked=true love11.checked = true; } } } //实现全不选的操作 function selNo() { /* 1、获取到要操作的复选框 2、返回的是数组，遍历数组 3、得到每一个复选框 4、设置复选框的属性 checked=false */ //得到要操作的复选框 var loves1 = document.getElementsByName("love"); //遍历数组 for(var j=0;j<loves1.length;j++) { //得到每一个复选框 var love1 = loves1[j]; //设置属性的值checked = false; love1.checked = false; } } //实现全选的操作 function selAll() { /* 1、获取要操作的复选框 - 使用getElementsByName() 2、返回是数组， - 属性 checked判断复选框是否选中 *** checked = true; //表示选中 *** checked = false;//表示不选中 - 遍历数组，得到的是每一个checkbox * 把每一个checkbox属性checked=true */ //获取要操作的复选框 var loves = document.getElementsByName("love"); //遍历数组，得到每一个复选框 for(var i=0;i<loves.length;i++) { var love1 = loves[i]; //得到每一个复选框 //设置属性是true love1.checked = true; } } </script> </body>
