实现购物车 全选全不选,反选,单选-选满时同步全选复选框--复选框checked属性取值问题已解决

原生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。即可】
* */

=====贴上代码:
<!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>


博主设置当前文章不允许评论。

没有更多推荐了,返回首页