本文實(shí)例講述了JS實(shí)現(xiàn)的全選、全不選及反選功能。分享給大家供大家參考，具體如下：
效果圖如下:點(diǎn)擊全選時(shí)會(huì)全部選中;全不選時(shí)全部不選;反選時(shí)反向選中.
html結(jié)構(gòu)代碼:
<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)點(diǎn)擊全選：選中所有選擇框（設(shè)置checked屬性為true） (2)點(diǎn)擊全不選：不選中所有選擇框（設(shè)置checked屬性為false） (3)點(diǎn)擊反選：讓每一個(gè)選擇框的checked屬性與自身相反 二：思路分析 1.獲取元素 2.注冊(cè)事件 3.事件處理 */ //1.獲取頁(yè)面元素 var checkAll = document.getElementById('checkAll');//全選 var unCheckAll = document.getElementById('unCheckAll');//全不選 var reverseCheck = document.getElementById('reverseCheck');//反選 var checkList = document.getElementsByClassName('check');//選擇框列表 //2.注冊(cè)事件 //2.1 全選 checkAll.onclick = function(){ //3.事件處理：選中所有選擇框（設(shè)置checked屬性為true） for(var i = 0;i<checkList.length;i++){ checkList[i].checked = true; } } //2.2 全不選 unCheckAll.onclick = function(){ //3.事件處理:不選中所有選擇框（設(shè)置checked屬性為false） for(var i = 0;i<checkList.length;i++){ checkList[i].checked = false; } } //2.3 反選 reverseCheck.onclick = function(){ //3.事件處理:讓每一個(gè)選擇框的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>m.survivalescaperooms.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)點(diǎn)擊全選：選中所有選擇框（設(shè)置checked屬性為true） (2)點(diǎn)擊全不選：不選中所有選擇框（設(shè)置checked屬性為false） (3)點(diǎn)擊反選：讓每一個(gè)選擇框的checked屬性與自身相反 二：思路分析 1.獲取元素 2.注冊(cè)事件 3.事件處理 */ //1.獲取頁(yè)面元素 var checkAll = document.getElementById('checkAll');//全選 var unCheckAll = document.getElementById('unCheckAll');//全不選 var reverseCheck = document.getElementById('reverseCheck');//反選 var checkList = document.getElementsByClassName('check');//選擇框列表 //2.注冊(cè)事件 //2.1 全選 checkAll.onclick = function(){ //3.事件處理：選中所有選擇框（設(shè)置checked屬性為true） for(var i = 0;i<checkList.length;i++){ checkList[i].checked = true; } } //2.2 全不選 unCheckAll.onclick = function(){ //3.事件處理:不選中所有選擇框（設(shè)置checked屬性為false） for(var i = 0;i<checkList.length;i++){ checkList[i].checked = false; } } //2.3 反選 reverseCheck.onclick = function(){ //3.事件處理:讓每一個(gè)選擇框的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代碼運(yùn)行工具：http://tools.VeVB.COm/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
