【JavaScript】實現複選框的全選、全部不選、反選
阿新 • • 發佈：2019-01-31
以較為簡潔的程式實現複選框的全選、全部不選、反選 操作。
並且將可變的部分設定為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>