Select a checkbox for the checkbox, and select another checkbox.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = 'HTTP: // www.w3.org/5o/xhtml' xml: lang = 'en'>
<Head>
<Meta http-equiv = 'content-type' content = 'text/html; charset = UTF-8 '/>
<Meta http-equiv = 'content-Language' content = 'en-use'/>
<Title> CheckBox select </title>
<Script type = 'text/javascript 'src = 'jquery-3.0.0.js '> </script>
<Script type = 'text/javascript '>
$ (Document). ready (function (){
/***** ---- Select all ----****/
// $ ('# Check1'). on ('change', function (){
// $ ("# Check1"). bind ("click", function (){
$ ('# Check1'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('Input'). prop ('checked', true );
}
Else {
$ ('Input'). prop ('checked', false );
}
If ($ (". do"). text () = "select all "){
$ (". Do"). text ("cancel ");
}
Else {
$ (". Do"). text ("select all ");
}
// Method 2
// $ ('Input [type = checkbox] '). prop ('checked', $ (this). prop ('checked '));
});
/***** ---- First column ----****/
$ ('# Checkl1'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check11, # check21, # check31, # check41, # check51'). prop ('checked', true );
}
Else {
$ ('# Check11, # check21, # check31, # check41, # check51'). prop ('checked', false );
}
// Method 2:
});
/***** ---- Second column ----****/
$ ('# Checkl2'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check12, # check22, # check32, # check42, # check52'). prop ('checked', true );
}
Else {
$ ('# Check12, # check22, # check32, # check42, # check52'). prop ('checked', false );
}
// Method 2:
});
/***** ---- Third column ----****/
$ ('# Checkl3'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check13, # check23, # check33, # check43, # check53'). prop ('checked', true );
}
Else {
$ ('# Check13, # check23, # check33, # check43, # check53'). prop ('checked', false );
}
// Method 2:
});
/***** ---- Column 4 ----****/
$ ('# Checkl4'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check14, # check24, # check34, # check44, # check54'). prop ('checked', true );
}
Else {
$ ('# Check14, # check24, # check34, # check44, # check54'). prop ('checked', false );
}
// Method 2:
});
/***** ---- The first line ----****/
$ ('# Checkh1'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check11, # check12, # check13, # check14'). prop ('checked', true );
} Else {
$ ('# Check11, # check12, # check13, # check14'). prop ('checked', false );
}
// Method 2:
});
/***** ---- The second line ----****/
$ ('# Checkh2'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check21, # check22, # check23, # check24'). prop ('checked', true );
} Else {
$ ('# Check21, # check22, # check23, # check24'). prop ('checked', false );
}
// Method 2:
});
/***** ---- The third line ----****/
$ ('# Checkh3'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check31, # check32, # check33, # check34'). prop ('checked', true );
} Else {
$ ('# Check31, # check32, # check33, # check34'). prop ('checked', false );
}
// Method 2:
});
/***** ---- Row 4 ----****/
$ ('# Checkh4'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check41, # check42, # check43, # check44'). prop ('checked', true );
} Else {
$ ('# Check41, # check42, # check43, # check44'). prop ('checked', false );
}
// Method 2:
});
/***** ---- The fifth line ----****/
$ ('# Checkh5'). on ('click', function (){
// Method 1
If (this. checked = true ){
$ ('# Check51, # check52, # check53, # check54'). prop ('checked', true );
} Else {
$ ('# Check51, # check52, # check53, # check54'). prop ('checked', false );
}
// Method 2:
});
});
</Script>
</Head>
<Body>
<Table> <tr>
<Td> <input type = "checkbox" id = "check1"/> <label for = "check1" class = "do"> select all </label> </td>
<Td> <input type = "checkbox" id = "checkl1"/> <label for = "checkl1"> first column </label> </td>
<Td> <input type = "checkbox" id = "checkl2"/> <label for = "checkl2"> second column </label> </td>
<Td> <input type = "checkbox" id = "checkl3"/> <label for = "checkl3"> third column </label> </td>
<Td> <input type = "checkbox" id = "checkl4"/> <label for = "checkl4"> fourth column </label> </td>
</Tr>
<Tr>
<Td> <input type = "checkbox" id = "checkh1"/> <label for = "checkh1"> first line </label> </td>
<Td> <input type = "checkbox" id = "check11"/> </td>
<Td> <input type = "checkbox" id = "check12"/> </td>
<Td> <input type = "checkbox" id = "check13"/> </td>
<Td> <input type = "checkbox" id = "check14"/> </td>
</Tr>
<Tr>
<Td> <input type = "checkbox" id = "checkh2"/> <label for = "checkh2"> Row 2 </label> </td>
<Td> <input type = "checkbox" id = "check21"/> </td>
<Td> <input type = "checkbox" id = "check22"/> </td>
<Td> <input type = "checkbox" id = "check23"/> </td>
<Td> <input type = "checkbox" id = "check24"/> </td>
</Tr>
<Tr>
<Td> <input type = "checkbox" id = "checkh3"/> <label for = "checkh3"> Row 3 </label> </td>
<Td> <input type = "checkbox" id = "check31"/> </td>
<Td> <input type = "checkbox" id = "check32"/> </td>
<Td> <input type = "checkbox" id = "check33"/> </td>
<Td> <input type = "checkbox" id = "check34"/> </td>
</Tr>
<Tr>
<Td> <input type = "checkbox" id = "checkh4"/> <label for = "checkh4"> row 4 </label> </td>
<Td> <input type = "checkbox" id = "check41"/> </td>
<Td> <input type = "checkbox" id = "check42"/> </td>
<Td> <input type = "checkbox" id = "check43"/> </td>
<Td> <input type = "checkbox" id = "check44"/> </td>
</Tr>
<Tr>
<Td> <input type = "checkbox" id = "checkh5"/> <label for = "checkh5"> fifth line </label> </td>
<Td> <input type = "checkbox" id = "check51"/> </td>
<Td> <input type = "checkbox" id = "check52"/> </td>
<Td> <input type = "checkbox" id = "check53"/> </td>
<Td> <input type = "checkbox" id = "check54"/> </td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
Reprinted with indicated source http://www.cnblogs.com/shinn-sjl/p/5655492.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
