1. 程式人生 > >JavaScript實現複選框的全選、全部不選、反選

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>