原生Js。不是JQuery。javascript
===全选按钮:checkAll;单选按钮checkItem;反选按钮:checkInversecss
===简单记录下:三种需求的实现思路:html
【-------题外话:复选框checked 和下拉框selected是默认自带的属性。只是默认没有加上,默认为false。java
特殊的是:checked属性隐含带有时,不选中;只要显式加上checked属性(不赋值,赋任意值),都会在会默认选中。】dom
①全选全不选:测试
checkAll和 全部的checkItem 的 checked值一致。spa
②反选:code
遍历,全部checkItem 的 checked值取反;htm
使用标记flag判断 checkItem反选完毕后,是否选满?对象
选满:设置checkAll的checked为“checked”;未选满:设置checkAll的checked为null或undefined。
【==######=【最大的难点就是:checkedAll的checked属性值如何赋值(修改checkAll状态)?
==###==测试过:像好多网上说的:选中,设为true;取消选中,设为false。===不能实现。
我作的过程:
===①先 取消checkedAll。
试过:checkedAll.setAttribute("checked","false"),checkedAll.setAttribute("checked",false),checkedAll.setAttribute("checked",“unchecked”)
都不行。根据【老师的提示:checked只有一个checked值;没有什么 unchecked,true,false做为值。
只要显式声明了checked属性(或者 像这里事件处理 动态地为checked属性赋值为true过),那么就会默认选中】,
===改变思路,决定:取消掉checked属性做用。
===一怒之下,把checked 赋值为null。第一次测试能够了,第二次取消全选,又不行了;又赋值为undefined,能够了。
===取消checkedAll完毕。
===②再 勾选checkedAll。
一样试过:checkedAll.setAttribute("checked","true"),checkedAll.setAttribute("checked",true),checkedAll.setAttribute("checked",“checked”)
都不行。===一样说明:checked只有一个checked值;没有什么 true做为值。
这里又遇到一个【奇葩问题】:checkAll.setAttribute("checked",“checked”),只有第一次能够勾上全选,第二次又不行了。坑爹!
各类查询,没解决。忽然换了种相同做用的 方式试了试:checkAll.checked="checked";能够了。
=== 勾选checkedAll完毕。
】-------作完: 勾选checkedAll;又试了下: ①先 取消checkedAll。发现checked=null或undefined,效果又同样了。null 第二次也行了。晕。
=========看来,问题关键仍是在:② 勾选checkedAll。 checked属性是否起做用。有待测试。
③单选选满时,同步勾选checkedAll。
这个其实和 ②反选: “反选后checkItem选满时,同步勾选checkAll”,的状况处理同样的。甚至更简单,再也不须要 对checkItem的checked值取反。
==================实现过程【所有完毕】。
功能已实现。但仍是不理解。
个人问题是:checkAll.setAttribute("checked",“checked”);和 checkAll.checked = “checked”;有什么区别呢?
(前者在第二次 同步勾选全选时 就无效了,后者有效)
哪位前辈能指点一下,万分感激!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table{ width: 500px; margin: 0 auto; border-collapse: collapse; } td,th{ border: 1px solid green; } </style> </head> <body> <table> <tr> <th> <!-- ======【只要有checked就默认选中】 <input type="checkbox" id="checkall" checked="undefined" οnclick="checkAll()"/> <input type="checkbox" id="checkall" checked οnclick="checkAll()"/>--> <input type="checkbox" id="checkall" οnclick="checkAll()"/> <input type="button" id="checkinverse" οnclick="checkInverse()" value="反选" /> </th> <th>学号</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <td> <input type="checkbox" class="item" /> </td> <td>1</td> <td></td> <td></td> </tr> <tr> <td> <input type="checkbox" class="item" /> </td> <td>2</td> <td></td> <td></td> </tr> <tr> <td> <input type="checkbox" class="item" /> </td> <td>3</td> <td></td> <td></td> </tr> <tr> <td> <input type="checkbox" class="item" /> </td> <td>4</td> <td></td> <td></td> </tr> <tr> <td> <input type="checkbox" class="item" /> </td> <td>5</td> <td></td> <td></td> </tr> <tr> <td> <input type="checkbox" class="item" /> </td> <td>6</td> <td></td> <td></td> </tr> </table> </body> <script type="text/javascript"> /* * 需求:单选:【选中状态保持一致】 * ======和 反选:【选中状态保持一致】同样的,只是去掉了 反选。 * ======【这一版:每一个单选的item和事件动态绑定 方式 实现。 * HTML里每一个item再也不须要 都要加上onclick。】 * 被选中的取消选中,没有选中的设置为选中(这是CheckBox自带功能) */ window.onload = function Syc () { var items = document.getElementsByClassName("item"); //====为每一个item动态绑定 事件处理方法。 for(var i=0; i<items.length; i++){ //items[i].checked = !items[i].checked; /*反选以后,判断全部属性值,有false,则checkAll为false;反之为true*/ // items[i].onclick = function Syc2(){ items[i].onchange = function Syc2(){ //设置全部item的选中状态与checkall的选中状态一致 //获取checkall的选中状态 //var checkallState = document.getElementById("checkall").checked; var checkallBtn = document.getElementById("checkall"); //获取到全部的item var items = document.getElementsByClassName("item"); var flag = true; for(var i=0; i<items.length; i++){ //items[i].checked = !items[i].checked; /*反选以后,判断全部属性值,有false,则checkAll为false;反之为true*/ if (!items[i].checked) { flag = false; break; } } //===反选:【选中状态保持一致】。 // alert(flag); if (!flag) { /*//==######=【能够了】【试了一夜。看来JS属性的意义 和数据类型有关】==========*/ checkallBtn.checked = undefined;//==######=【能够了】 //checkallBtn.checked = null;//===【只有第一次能够,不能够了】 }else{ //checkallBtn.setAttribute("checked","checked"); //====#####==最后一个Bug====【第二次全选,全选按钮,又选不上了。==已解决?】 checkallBtn.checked="checked";//=======【时灵,时不灵】 } }; } } function checkSyc(){//===ok //设置全部item的选中状态与checkall的选中状态一致 //获取checkall的选中状态 //var checkallState = document.getElementById("checkall").checked; var checkallBtn = document.getElementById("checkall"); //获取到全部的item var items = document.getElementsByClassName("item"); var flag = true; for(var i=0; i<items.length; i++){ //items[i].checked = !items[i].checked; /*反选以后,判断全部属性值,有false,则checkAll为false;反之为true*/ if (!items[i].checked) { flag = false; break; } } //===反选:【选中状态保持一致】。 //alert(flag); if (!flag) { /*//==######=【能够了】【试了一夜。看来JS属性的意义 和数据类型有关】==========*/ checkallBtn.checked = undefined;//==######=【能够了】 //checkallBtn.checked = null;//===【只有第一次能够,不能够了】 }else{ //checkallBtn.setAttribute("checked","checked"); //====#####==最后一个Bug====【第二次全选,全选按钮,又选不上了。==已解决?】 checkallBtn.checked="checked";//=======【时灵,时不灵】 } //==###=【改进:】不管是反选,单选,没有选满时,不须要对全选按钮进行处理。 } /* * 需求:反选 * 点击反选按钮,把item里的复选框,被选中的取消选中,没有选中的设置为选中 * * 暗含:===反选:【选中状态保持一致】。 */ function checkInverse(){//===ok //设置全部item的选中状态与checkall的选中状态一致 //获取checkall的选中状态 //var checkallState = document.getElementById("checkall").checked; var checkallBtn = document.getElementById("checkall"); //获取到全部的item var items = document.getElementsByClassName("item"); var flag = true; for(var i=0; i<items.length; i++){ items[i].checked = !items[i].checked; /*反选以后,判断全部属性值,有false,则checkAll为false;反之为true*/ if (!items[i].checked) { flag = false; } } //=======反选:【选中状态保持一致】。 //alert(flag); if (!flag) { /*=====失败案例: * checkallBtn.checked = false; checkallBtn.removeAttribute("checked");*/ /*//==######=【能够了】【试了一夜。看来JS属性的意义 和数据类型有关】==========*/ //checkallBtn.checked = undefined;//==######=【能够了】 checkallBtn.checked = null;//===【只有第一次能够,不能够了】 }else{ //checkallBtn.setAttribute("checked","checked");//===第二次不行。 //====#####==最后一个Bug====【第二次全选,全选按钮,又选不上了。==已解决?】 checkallBtn.checked="checked";//【能够了】=======【时灵,时不灵】 /*==========问题:======? 使用:checkallBtn.setAttribute("checked","checked");,第二次(反选或选满时)全选按钮 选不上; 而使用做用相同的checkallBtn.checked="checked"; 却功能正常(至少目前这样)。 【问题产生缘由?】 checkallBtn.setAttribute("checked","checked")和 checkallBtn.checked="checked";区别? ===== * */ } } //点击checkall,设置全部的item的选中状态 function checkAll(){ //设置全部item的选中状态与checkall的选中状态一致 //获取checkall的选中状态 var state = document.getElementById("checkall").checked; //获取到全部的item var items = document.getElementsByClassName("item"); for(var i=0; i<items.length; i++){ items[i].checked = state; } } //获取全部行 var rows = document.getElementsByTagName("tr"); for(var i=0; i<rows.length; i++){ if(i==0){ continue; } if(i%2==0){ rows[i].style.backgroundColor = "lightblue"; }else{ rows[i].style.backgroundColor = "lightgreen"; } } </script> </html>