實現購物車 全選全不選，反選，單選-選滿時同步全選核取方塊--核取方塊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>
相關文章
- JavaScript 核取方塊全選和全不選JavaScript
- JS實現核取方塊全選反選JS
- JavaScript核取方塊全選和全不選詳解JavaScript
- jQuery核取方塊全選和全不選效果jQuery
- jQuery如何實現核取方塊全選和全不選jQuery
- javascript核取方塊全選和反選效果JavaScript
- 核取方塊全選和全不選程式碼例項
- jQuery核取方塊全選和全不選效果程式碼jQuery
- 原生js實現的核取方塊的全選和全不選效果JS
- js核取方塊全選和取消全選效果JS
- JavaScript 核取方塊全選和取消全選效果JavaScript
- javascript實現checkbox核取方塊全選和反選功能JavaScript
- jQuery核取方塊checkbox的全選和反選jQuery
- javascript checkbox核取方塊全選和取消全選效果JavaScript
- jquery實現checkbox核取方塊全選效果jQuery
- checkbox 核取方塊全選程式碼
- checkbox核取方塊全選和取消全選例項程式碼
- 小程式核取方塊全選和全部取消
- 單選按鈕和核取方塊
- javascript實現核取方塊全選和取消程式碼分析JavaScript
- 如何使用jQuery實現核取方塊的全選和取消jQuery
- JS如何實現對name是陣列的核取方塊的全選和反選以及取消選擇JS陣列
- 使用jQuery做核取方塊的全選與取消jQuery
- js實現checkbox核取方塊的反選效果JS
- 如何實現點選文字也能夠選中核取方塊
- JavaScript獲取選中checkbox核取方塊的選中值JavaScript
- checbox核取方塊實現radio單選框的單選功能
- js如何實現點選li選中和取消裡面的核取方塊JS
- 根據name屬性值篩選checkbox核取方塊
- JavaScript 限制核取方塊選中數目JavaScript
- jquerycheckbox核取方塊多次點選判斷選中狀態,以及全選/取消的程式碼示例jQuery
- 純CSS模擬單選框和核取方塊CSS
- JavaScript獲取選中checkbox核取方塊值JavaScript
- js 獲取被選中核取方塊的值JS
- css點選附近文字選中核取方塊程式碼例項CSS
- 選中和取消選中核取方塊實現背景變色和取消變色
- jquery table下的核取方塊選中、取消jQuery
- 將選中核取方塊值存入陣列陣列