本文實例講述了JS實現的全選、全不選及反選功能。分享給大家供大家參考，具體如下：
效果圖如下:點擊全選時會全部選中;全不選時全部不選;反選時反向選中.
html結構代碼:
<input class = 'check' type="checkbox" ><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input id="checkAll" type="button" value="全選"><input id="unCheckAll" type="button" value="全不"><input id="reverseCheck" type="button" value="反選">
javascript代碼如下:
<script> /*一：需求分析： (1)點擊全選：選中所有選擇框（設置checked屬性為true） (2)點擊全不選：不選中所有選擇框（設置checked屬性為false） (3)點擊反選：讓每一個選擇框的checked屬性與自身相反 二：思路分析 1.獲取元素 2.注冊事件 3.事件處理 */ //1.獲取頁面元素 var checkAll = document.getElementById('checkAll');//全選 var unCheckAll = document.getElementById('unCheckAll');//全不選 var reverseCheck = document.getElementById('reverseCheck');//反選 var checkList = document.getElementsByClassName('check');//選擇框列表 //2.注冊事件 //2.1 全選 checkAll.onclick = function(){ //3.事件處理：選中所有選擇框（設置checked屬性為true） for(var i = 0;i<checkList.length;i++){ checkList[i].checked = true; } } //2.2 全不選 unCheckAll.onclick = function(){ //3.事件處理:不選中所有選擇框（設置checked屬性為false） for(var i = 0;i<checkList.length;i++){ checkList[i].checked = false; } } //2.3 反選 reverseCheck.onclick = function(){ //3.事件處理:讓每一個選擇框的checked屬性與自身相反 for(var i = 0;i<checkList.length;i++){ checkList[i].checked = !checkList[i].checked;//邏輯非取反 // if (checkList[i].checked == true){ // checkList[i].checked = false; // }else{//false // checkList[i].checked = true; // } } }</script>完整示例代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.49028c.com JS全選、全不選、反選</title></head><body><input class = 'check' type="checkbox" ><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input id="checkAll" type="button" value="全選"><input id="unCheckAll" type="button" value="全不"><input id="reverseCheck" type="button" value="反選"><script> /*一：需求分析： (1)點擊全選：選中所有選擇框（設置checked屬性為true） (2)點擊全不選：不選中所有選擇框（設置checked屬性為false） (3)點擊反選：讓每一個選擇框的checked屬性與自身相反 二：思路分析 1.獲取元素 2.注冊事件 3.事件處理 */ //1.獲取頁面元素 var checkAll = document.getElementById('checkAll');//全選 var unCheckAll = document.getElementById('unCheckAll');//全不選 var reverseCheck = document.getElementById('reverseCheck');//反選 var checkList = document.getElementsByClassName('check');//選擇框列表 //2.注冊事件 //2.1 全選 checkAll.onclick = function(){ //3.事件處理：選中所有選擇框（設置checked屬性為true） for(var i = 0;i<checkList.length;i++){ checkList[i].checked = true; } } //2.2 全不選 unCheckAll.onclick = function(){ //3.事件處理:不選中所有選擇框（設置checked屬性為false） for(var i = 0;i<checkList.length;i++){ checkList[i].checked = false; } } //2.3 反選 reverseCheck.onclick = function(){ //3.事件處理:讓每一個選擇框的checked屬性與自身相反 for(var i = 0;i<checkList.length;i++){ checkList[i].checked = !checkList[i].checked;//邏輯非取反 // if (checkList[i].checked == true){ // checkList[i].checked = false; // }else{//false // checkList[i].checked = true; // } } }</script></body></html>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
