首頁 > 開發者 > JavaScript
以較為簡潔的程式實現複選框的全選、全部不選、反選 操作。
並且將可變的部分設定為JS的參數，以實現代碼複用。
全選和全不選第一個參數為複選框名稱，第二個參數為是全選還是全部不選。
function allCheck(name,boolValue) {var allvalue = document.getElementsByName(name); for (var i = 0; i < allvalue.length; i++) { if (allvalue[i].type == "checkbox") allvalue[i].checked = boolValue; }}
反選
參數為複選框名稱
function reserveCheck(name){var revalue = document.getElementsByName(name); for(i=0;i<revalue.length;i++){ if(revalue[i].checked == true) revalue[i].checked = false; else revalue[i].checked = true;}}
範常式序
<!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>無標題文檔</title></head><script language="javascript">//全選和全不選（第一個參數為複選框名稱，第二個參數為是全選還是全不選）function allCheck(name,boolValue) {var allvalue = document.getElementsByName(name); for (var i = 0; i < allvalue.length; i++) { if (allvalue[i].type == "checkbox") allvalue[i].checked = boolValue; }}//反選 參數為複選框名稱function reserveCheck(name){var revalue = document.getElementsByName(name); for(i=0;i<revalue.length;i++){ if(revalue[i].checked == true) revalue[i].checked = false; else revalue[i].checked = true;}}</script><body ><div > <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇1 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇2 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇3 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇4 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇5 <p></p> <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇6 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇7 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇8 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇9 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇10 <p></p> <a href="javascript:allCheck('choice',true)">全選</a> <a href="javascript:allCheck('choice',false)">全不選</a> <a href="javascript:reserveCheck('choice')">反選</a> </div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
