So I tried to write one by myself based on the online example to achieve the desired effect. In fact, this is also a very simple example. I hope you can point out some shortcomings.
Below I will post the code for you to see
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "checkAll. aspx. cs" Inherits = "checkAll" %>
<! 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 = "Js/jquery-1.5.2.js" type = "text/javascript"> </script>
<Script src = "Js/jquery-1.5.2.min.js" type = "text/javascript"> </script>
<Script language = "javascript" type = "text/javascript">
$ (Document). ready (function (){
// Select all or none
$ ("# ChkAll"). click (function () {// when you click the Select All box
Var flag = $ ("# chkAll"). attr ("checked"); // you can specify the status of the Select All button.
$ ("[Id $ = 'item']"). each (function () {// find the checkbox with each Id ending with an Item
$ (This). attr ("checked", flag); // select or deselect
});
});
// If all selected items are checked and all selected items are canceled, the All selected items are canceled.
$ ("[Id $ = 'item']"). each (function (){
$ (This). click (function (){
If ($ ("[id $ = 'item']: checked"). length = $ ("[id $ = 'item']"). length ){
$ ("# ChkAll"). attr ("checked", "checked ");
}
Else $ ("# chkAll"). removeAttr ("checked ");
});
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Table>
<Tr>
<Td width = "100px">
<Asp: CheckBox ID = "chkAll" runat = "server" Text = "select all"/>
</Td>
</Tr>
<Tr>
<Td width = "100px">
<Asp: CheckBox ID = "chk1_Item" runat = "server"/>
</Td>
</Tr>
<Tr>
<Td width = "100px">
<Asp: CheckBox ID = "chk2_Item" runat = "server"/>
</Td>
</Tr>
<Tr>
<Td width = "100px">
<Asp: CheckBox ID = "chk3_Item" runat = "server"/>
</Td>
</Tr>
<Tr>
<Td width = "100px">
<Asp: CheckBox ID = "chk4_Item" runat = "server"/>
</Td>
</Tr>
<Tr>
<Td width = "100px">
<Asp: CheckBox ID = "chk5_Item" runat = "server"/>
</Td>
</Tr>
<Tr>
<Td width = "100px">
<Asp: CheckBox ID = "chk6_Item" runat = "server"/>
</Td>
</Tr>
<Tr>
<Td width = "100px">
<Asp: CheckBox ID = "chk7_Item" runat = "server"/>
</Td>
</Tr>
</Table>
</Div>
</Form>
</Body>
</Html>