Select all, unselect and invert selection functions
Selecting all check boxes, inverting selection and deselecting mainly uses JavaScript scripts and is completed through custom functions.
(1) In completing the select, invert and unselect functions of check boxes through custom functions in JavaScript scripts, the first method used is getElementsByTagName,
Get the specification The name of the label. The return value is an object containing label information.
(2) Based on the object returned by the getElementsByTagName tag, determine whether the value of the tag type (type) is checkbox.
(3) When the value of the label type type is checkbox, assign a value to the checkbox in the label. When the value of checked is TRUE, assign it to FALSE; when the value of checked is FALSE,
Assign it to TRUE.
<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<form method="post" name="form1" id="form1" action="">
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_1" id="conn_id_1" value="1"/></td>
<td>東邪</td>
<td>PHP</td>
<td>部門經(jīng)理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_2" id="conn_id_2" value="1"/></td>
<td>西毒</td>
<td>JAVA</td>
<td>部門經(jīng)理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_3" id="conn_id_3" value="1"/></td>
<td>南帝</td>
<td>VB</td>
<td>部門經(jīng)理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_4" id="conn_id_4" value="1"/></td>
<td>北丐</td>
<td>ASP</td>
<td>部門經(jīng)理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<input type="button" onclick="uncheckAll(form1,status)" value="不選">
<input type="button" onclick="checkAll(form1,status)" value="全選">
<input type="button" onclick="switchAll(form1,status)" value="反選">
</tr>
</form>
<script>
function uncheckAll(form1,status){ //不選
var elements = document.getElementsByTagName('input'); //獲取input標(biāo)簽
for(var i=0;i<elements.length;i++){ //根據(jù)標(biāo)簽的長度執(zhí)行循環(huán)
if(elements[i].type == 'checkbox'){ //判斷對象中元素的類型
if(elements[i].checked==true){ //判斷當(dāng)checked的值為TURE時
elements[i].checked=false; //將checked賦值為FALSE
}
}
}
}
function checkAll(form1,status){ //全選
var elements = document.getElementsByTagName('input');
for(var i=0;i<elements.length;i++){
if(elements[i].type == 'checkbox'){
if(elements[i].checked==false){
elements[i].checked=true;
}
}
}
}
function switchAll(form1,status){ //反選
var elements = document.getElementsByTagName('input');
for(var i=0;i<elements.length;i++){
if(elements[i].type == 'checkbox'){
if(elements[i].checked==true){
elements[i].checked=false;
}else if(elements[i].checked==false){
elements[i].checked=true;
}
}
}
}
</script>
</body>
</html>
