<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全選練習</title> <script type="text/javascript"> window.onload = function(){ //獲取四個多選框items var items = document.getElementsByName("items"); //獲取全選/全不選的多選框 var checkedAllBox = document.getElementById("checkedAllBox"); /* * 全選按鈕 * - 點擊按鈕以后，四個多選框全都被選中 */ //1.#checkedAllBtn //為id為checkedAllBtn的按鈕綁定一個單擊響應函數 var checkedAllBtn = document.getElementById("checkedAllBtn"); checkedAllBtn.onclick = function(){ //遍歷items for(var i=0 ; i<items.length ; i++){ //通過多選框的checked屬性可以來獲取或設置多選框的選中狀態 //alert(items[i].checked); //設置四個多選框變成選中狀態 items[i].checked = true; } //將全選/全不選設置為選中 checkedAllBox.checked = true; }; /* * 全不選按鈕 * - 點擊按鈕以后，四個多選框都變成沒選中的狀態 */ //2.#checkedNoBtn //為id為checkedNoBtn的按鈕綁定一個單擊響應函數 var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function(){ for(var i=0; i<items.length ; i++){ //將四個多選框設置為沒選中的狀態 items[i].checked = false; } //將全選/全不選設置為不選中 checkedAllBox.checked = false; }; /* * 反選按鈕 * - 點擊按鈕以后，選中的變成沒選中，沒選中的變成選中 */ //3.#checkedRevBtn var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){ //將checkedAllBox設置為選中狀態 checkedAllBox.checked = true; for(var i=0; i<items.length ; i++){ //判斷多選框狀態 /*if(items[i].checked){ //證明多選框已選中，則設置為沒選中狀態 items[i].checked = false; }else{ //證明多選框沒選中，則設置為選中狀態 items[i].checked = true; }*/ items[i].checked = !items[i].checked; //判斷四個多選框是否全選 //只要有一個沒選中則就不是全選 if(!items[i].checked){ //一旦進入判斷，則證明不是全選狀態 //將checkedAllBox設置為沒選中狀態 checkedAllBox.checked = false; } } //在反選時也需要判斷四個多選框是否全都選中 }; /* * 提交按鈕： * - 點擊按鈕以后，將所有選中的多選框的value屬性值彈出 */ //4.#sendBtn //為sendBtn綁定單擊響應函數 var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function(){ //遍歷items for(var i=0 ; i<items.length ; i++){ //判斷多選框是否選中 if(items[i].checked){ alert(items[i].value); } } }; //5.#checkedAllBox /* * 全選/全不選 多選框 * - 當它選中時，其余的也選中，當它取消時其余的也取消 * * 在事件的響應函數中，響應函數是給誰綁定的this就是誰 */ //為checkedAllBox綁定單擊響應函數 checkedAllBox.onclick = function(){ //alert(this === checkedAllBox); //設置多選框的選中狀態 for(var i=0; i <items.length ; i++){ items[i].checked = this.checked; } }; //6.items /* * 如果四個多選框全都選中，則checkedAllBox也應該選中 * 如果四個多選框沒都選中，則checkedAllBox也不應該選中 */ //為四個多選框分別綁定點擊響應函數 for(var i=0 ; i<items.length ; i++){ items[i].onclick = function(){ //將checkedAllBox設置為選中狀態 checkedAllBox.checked = true; for(var j=0 ; j<items.length ; j++){ //判斷四個多選框是否全選 //只要有一個沒選中則就不是全選 if(!items[j].checked){ //一旦進入判斷，則證明不是全選狀態 //將checkedAllBox設置為沒選中狀態 checkedAllBox.checked = false; //一旦進入判斷，則已經得出結果，不用再繼續執行循環 break; } } }; } }; </script> </head> <body> <form method="post" action=""> 你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="籃球" />籃球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br /> <input type="button" id="checkedAllBtn" value="全 選" /> <input type="button" id="checkedNoBtn" value="全不選" /> <input type="button" id="checkedRevBtn" value="反 選" /> <input type="button" id="sendBtn" value="提 交" /> </form> </body> </html>