實現購物車 全選全不選，反選，單選-選滿時同步全選核取方塊--核取方塊checked屬性取值問題已解決

小夥子加油發表於2017-08-14

原生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>


相關文章