实现购物车 全选全不选，反选，单选-选满时同步全选复选框--复选框checked属性取值问题已解决
2017-08-14 09:23
525 查看
原生Js。不是JQuery。
===全选按钮：checkAll；单选按钮checkItem；反选按钮：checkInverse
===简单记录下：三种需求的实现思路：
【-------题外话：复选框checked 和下拉框selected是默认自带的属性。只是默认没有加上，默认为false。
特殊的是：checked属性隐含带有时，不选中；只要显式加上checked属性（不赋值，赋任意值），都会在会默认选中。】
①全选全不选：
checkAll和 所有的checkItem 的 checked值一致。
②反选：
遍历，所有checkItem 的 checked值取反；
使用标记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”；有什么区别呢？
（前者在第二次 同步勾选全选时 就无效了，后者有效）
哪位前辈能指点一下，万分感激！
/*==========问题：======？
使用:checkallBtn.setAttribute("checked","checked");,第二次（反选或选满时）全选按钮 选不上;
而使用作用相同的checkallBtn.checked="checked";却功能正常（至少目前这样）。
【问题产生原因？】
checkallBtn.setAttribute("checked","checked")和
checkallBtn.checked="checked";区别？
=====
【老师答案：一种是dom对象属性，一种是js对象的属性，两种属性是有区别的。不需要做深究。
只需要记住通常最通用的 方式：checkallBtn.checked=true或false。即可】
* */
=====贴上代码：
===全选按钮：checkAll；单选按钮checkItem；反选按钮：checkInverse
===简单记录下：三种需求的实现思路：
【-------题外话：复选框checked 和下拉框selected是默认自带的属性。只是默认没有加上，默认为false。
特殊的是：checked属性隐含带有时，不选中；只要显式加上checked属性（不赋值，赋任意值），都会在会默认选中。】
①全选全不选：
checkAll和 所有的checkItem 的 checked值一致。
②反选：
遍历，所有checkItem 的 checked值取反；
使用标记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”；有什么区别呢？
（前者在第二次 同步勾选全选时 就无效了，后者有效）
哪位前辈能指点一下，万分感激！
/*==========问题：======？
使用:checkallBtn.setAttribute("checked","checked");,第二次（反选或选满时）全选按钮 选不上;
而使用作用相同的checkallBtn.checked="checked";却功能正常（至少目前这样）。
【问题产生原因？】
checkallBtn.setAttribute("checked","checked")和
checkallBtn.checked="checked";区别？
=====
【老师答案：一种是dom对象属性，一种是js对象的属性，两种属性是有区别的。不需要做深究。
只需要记住通常最通用的 方式：checkallBtn.checked=true或false。即可】
* */
=====贴上代码：
<!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" onclick="checkAll()"/>
<input type="checkbox" id="checkall" checked onclick="checkAll()"/>-->
<input type="checkbox" id="checkall" onclick="checkAll()"/>
<input type="button" id="checkinverse" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jsp中验证码的实现，以及ajax实现的正确的验证，解决了session不同步的问题。（我这里已测试过，可以直接用）
- 异步 HttpContext.Current实现取值的方法(解决异步Application,Session,Cache...等失效的问题)
- 完美解决Android在listview添加checkbox实现单选多选操作问题
- 解决jquery下checked取值问题...
- javascript 单选或复选剩余一项时数据取值问题如何解决
- 完美解决Android在listview添加checkbox实现单选多选操作问题
- 解决GridPager分页组件复选框不能全选问题
- 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
- 完美解决Android在listview添加checkbox实现单选多选操作问题
- 异步 HttpContext.Current实现取值的方法(解决异步Application,Session,Cache...等失效的问题)
- 完美解决Android在listview添加checkbox实现单选多选操作问题
- JS实现复选框全选问题 按类型分类CheckBox
- 在网络游戏中使用 Protobuf 解决属性同步问题
- 用PV操作解决经典进程同步问题 C#实现
- jquery下checked取值问题的解决方法
- 解决checkbox属性checked为true但是未被选中的问题
- Delphi中多线程用Synchronize实现VCL数据同步显示 解决在线程中操作控件出现问题
- 异步 HttpContext.Current实现取值的方法(解决异步Application,Session,Cache...等失效的问题)
- 解决 Ext.Ajax.request 同步请求实现问题 (Ext3.0)
- 解决Android在listview添加checkbox实现单选多选操作问题