1. Select checkbox list
:
Code:
Copy codeThe Code is as follows:
<! 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 runat = "server">
<Title> </title>
<Script src = "Scripts/jquery-1.7.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
// Select all
$ ("# BtnCheckAll"). bind ("click", function (){
$ ("[Name = chkItem]: checkbox"). attr ("checked", true );
});
// None
$ ("# BtnCheckNone"). bind ("click", function (){
$ ("[Name = chkItem]: checkbox"). attr ("checked", false );
});
// Invert Selection
$ ("# BtnCheckReverse"). bind ("click", function (){
$ ("[Name = chkItem]: checkbox"). each (function (){
$ (This). attr ("checked ",! $ (This). attr ("checked "));
});
});
// None
$ ("# BtnSubmit"). bind ("click", function (){
Var result = new Array ();
$ ("[Name = chkItem]: checkbox"). each (function (){
If ($ (this). is (": checked ")){
Result. push ($ (this). attr ("value "));
}
});
Alert (result. join (","));
});
});
</Script>
</Head>
<Body>
<Div>
<Input name = "chkItem" type = "checkbox" value = "today's topic"/> today's topic
<Input name = "chkItem" type = "checkbox" value = "visual Focus"/> visual focus
<Input name = "chkItem" type = "checkbox" value = "finance"/> Finance
<Input name = "chkItem" type = "checkbox" value = "Auto"/> auto
<Input name = "chkItem" type = "checkbox" value = "technology"/> Technology
<Input name = "chkItem" type = "checkbox" value = ""/> Real Estate
<Input name = "chkItem" type = "checkbox" value = "Tourism"/> Tourism
</Div>
<Div>
<Input id = "btnCheckAll" type = "button" value = "select all"/>
<Input id = "btnCheckNone" type = "button" value = "NONE"/>
<Input id = "btnCheckReverse" type = "button" value = "invert"/>
<Input id = "btnSubmit" type = "button" value = "Submit"/>
</Div>
</Body>
</Html>
2. Select checkbox table
:
Code:
Copy codeThe Code is as follows:
<! 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 runat = "server">
<Title> </title>
<Style type = "text/css">
Table
{
Border-collapse: collapse;
}
Td
{
Border: 1px solid # ccc;
}
</Style>
<Script src = "Scripts/jquery-1.7.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
// ChkAll select all events
$ ("# ChkAll"). bind ("click", function (){
$ ("[Name = chkItem]: checkbox"). attr ("checked", this. checked );
});
// ChkItem event
$ ("[Name = chkItem]: checkbox"). bind ("click", function (){
Var $ chk = $ ("[name = chkItem]: checkbox ");
$ ("# ChkAll"). attr ("checked", $ chk. length = $ chk. filter (": checked"). length );
})
});
</Script>
</Head>
<Body>
<Table id = "tb">
<Thead>
<Tr>
<Td>
<Input id = "chkAll" type = "checkbox"/>
</Td>
<Td>
Category name
</Td>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>
<Input name = "chkItem" type = "checkbox" value = "today's topic"/>
</Td>
<Td>
Today's topic
</Td>
</Tr>
<Tr>
<Td>
<Input name = "chkItem" type = "checkbox" value = "visual Focus"/>
</Td>
<Td>
Visual focus
</Td>
</Tr>
<Tr>
<Td>
<Input name = "chkItem" type = "checkbox" value = "finance"/>
</Td>
<Td>
Finance and economics
</Td>
</Tr>
<Tr>
<Td>
<Input name = "chkItem" type = "checkbox" value = "Auto"/>
</Td>
<Td>
Automobile
</Td>
</Tr>
<Tr>
<Td>
<Input name = "chkItem" type = "checkbox" value = "technology"/>
</Td>
<Td>
Technology
</Td>
</Tr>
<Tr>
<Td>
<Input name = "chkItem" type = "checkbox" value = ""/>
</Td>
<Td>
Real Estate
</Td>
</Tr>
<Tr>
<Td>
<Input name = "chkItem" type = "checkbox" value = "Tourism"/>
</Td>
<Td>
Tourism
</Td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>