Title:
Select All and invert check boxes for Js implementations, and select tables in batches
Purpose:
A. Click the column header check box to select all or not select any subitem
B. If one subitem is not selected, the column header is deselected.
C. When all sub-projects are selected, the column header check box is automatically set to the selected status.
D. Select the check box of the subitem in turn.
The Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Title> select all and invert js implementations-Liehuo. Net, huo94 network, lie04 </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Script language = "javascript">
// -- The column header selection box is clicked ---
Function ChkAllClick (sonName, cbAllId ){
Var arrSon = document. getElementsByName (sonName );
Var cbAll = document. getElementById (cbAllId );
Var tempState = cbAll. checked;
For (I = 0; I <arrSon. length; I ++ ){
If (arrSon [I]. checked! = TempState)
ArrSon [I]. click ();
}
}
// -- The subitem check box is clicked ---
Function ChkSonClick (sonName, cbAllId ){
Var arrSon = document. getElementsByName (sonName );
Var cbAll = document. getElementById (cbAllId );
For (var I = 0; I <arrSon. length; I ++ ){
If (! ArrSon [I]. checked ){
CbAll. checked = false;
Return;
}
}
CbAll. checked = true;
}
// -- Select whether to be clicked ---
Function ChkOppClick (sonName ){
Var arrSon = document. getElementsByName (sonName );
For (I = 0; I <arrSon. length; I ++ ){
ArrSon [I]. click ();
}
}
</Script>
</Head>
<Body>
<Form name = "form1" method = "post" action = "">
<Table width = "500" border = "1">
<Tr bgcolor = "# FFFF66">
<Td>
<INPUT name = "chkAll" id = "chkAll" title = "select all" onClick = "ChkAllClick ('chkson', 'chkall ') "type =" checkbox "/> select all </td>
<Td align = "center"> select all check boxes </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon1" type = "checkbox" value = '1' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 1 </td>
<Td> role: </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon2" type = "checkbox" value = '2' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 2 </td>
<Td> a. Click the check box in the column header to select all or not all </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon3" type = "checkbox" value = '3' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 3 </td>
<Td> B. If one subitem is not selected, the column header is deselected </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon4" type = "checkbox" value = '4' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 4 </td>
<Td> c. When all sub-projects are selected, the column header check box is automatically set to the selected status </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon5" type = "checkbox" value = '5' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 5 </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon6" type = "checkbox" value = '6' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 6 </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon7" type = "checkbox" value = '7' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 7 </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon8" type = "checkbox" value = '8' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 8 </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon9" type = "checkbox" value = '9' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 9 </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> <INPUT name = "chkSon" id = "chkSon10" type = "checkbox" value = '10' onclick = "ChkSonClick ('chkson', 'chkall ') "/> 10 </td>
<Td> d. Select the check box in turn </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr bgcolor = "#66 FFFF">
<Td> <INPUT name = "chkOpposite" id = "chkOpposite" title = "invert" onClick = "ChkOppClick ('chkson ') "type =" checkbox "/> invert selection </td>
<Td align = "center"> invert selection example </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
</Table>
</Form>
</Body>
</Html>