Home > Developer > JavaScript
This articleArticleThe same is to solve a question in the blog: Question: About how JS reads the gridview and how checkbox is selected. Of course, half of the Implementation below is done to solve this problem, and the other half is done by another friend a long time ago, similarly, JavaScript performs checkbox operations in the gridview, but the operation order is completely reversed. Instead of obtaining all the selected items, it automatically selects the corresponding items based on the user input.
Although it is to solve the checkbox control problem in the gridview, but in fact the function is not limited to the gridview, a slight change can be used in other scenarios, you don't even need to change it (I don't know if there are any customers that are so confused)
CodeThe post is still below, which is much longer than the previous article using JavaScript/CSS to achieve the alternating background color of the gridview row and the color of the row to be clicked. However, I feel that the comment is still detailed enough, so it should be easy to understand, you can copy the code of the following two files to your project for execution. The following files can be downloaded and run. The Code passes the test in IE7 and firefox2. If you have any questions, please leave a message below and I will try my best to reply in time.
Checkbox. aspx
It mainly contains a gridview, which contains the checkbox to be tossed, and a large number ~~~~ The heap Javascript is of course an important means of tossing, but the goal has basically been replaced by the checkbox in the gridview, which is not closely related to the gridview itself.
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "checkbox. aspx. cs" inherits = "checkbox" %>
<! 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> checkbox </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Asp: gridview runat = "server" id = "gvmeimingzi" autogeneratecolumns = "false">
<Columns>
<Asp: templatefield>
<Itemtemplate>
<Input name = "Chk" type = "checkbox" value = "<% # eval (" ID ") %>"/>
</Itemtemplate>
</ASP: templatefield>
<Asp: boundfield datafield = "ID" headertext = "ID"/>
<Asp: boundfield datafield = "author" headertext = "author"/>
<Asp: boundfield datafield = "title" headertext = "title"/>
<Asp: boundfield datafield = "posttime" headertext = "posttime"/>
<Asp: boundfield datafield = "url"
Dataformatstring = "<a href = '{0}' target = '_ blank'> click to open it </a>"
Headertext = "Link" htmlencode = "false"/>
</Columns>
</ASP: gridview>
<P> selected items: <input type = "text" size = "60" id = "checked"/> </P>
<P> items to be selected: <input type = "text" size = "60" id = "checking"/> <input type = "button" value = "select" onclick = "checkthem () "/> </P>
<P> when an item is selected or deselected from the preceding gridview, the selected items are automatically updated to the IDs of all currently selected items. </P>
<P> enter the ID of the item to be selected in "items to be selected" (IDs are separated by commas). Click "select" to automatically select the item to be selected. </P>
</Form>
<SCRIPT type = "text/JavaScript">
// Obtain all the checkboxes first.
VaR chklist = Document. getelementsbyname ("Chk ");
Window. onload = function (){
// Add onclick event processing for all checkpoints to automatically update "selected items"
For (VAR I = 0; I <chklist. length; I ++ ){
Chklist [I]. onclick = chkclick;
}
}
// The onclick event of the checkbox, which is used to update the "selected items"
Function chkclick (){
VaR checkedlist = "";
// Obtain all selected items
For (VAR I = 0; I <chklist. length; I ++ ){
If (chklist [I]. Checked)
Checkedlist + = chklist [I]. Value + ",";
}
// Display the list of selected items to "selected items". Here, substring is used to remove the last comma.
Document. getelementbyid ("checked"). value = checkedlist. substring (0, checkedlist. Length-1 );
}
// Select the corresponding item based on the input in "items to be selected"
Function checkthem (){
VaR checkinglist = Document. getelementbyid ("checking"). value;
// Return directly without input
If (checkinglist. Length = 0) {return ;}
// Obtain the IDs of all the items you want to select
VaR checkingids = checkinglist. Split (",");
// Set the selection status. Pay attention to the order of the two loops. If you place the chklist in the inner layer, you cannot always get the correct result.
// If multiple IDs are input, the following IDs will overwrite the preceding correct results.
For (var j = 0; j <chklist. length; j ++ ){
For (VAR I = 0; I <checkingids. length; I ++ ){
If (checkingids [I] = chklist [J]. Value ){
Chklist [J]. Checked = true;
Break;
}
Else {
Chklist [J]. Checked = false;
}
}
}
}
</SCRIPT>
</Body>
</Html>
Checkbox. aspx. CS
It is still used to generate test data, otherwise there will be nothing in the front of the gridview, and there will be no trouble
Using system;
Using system. Data;
Public partial class checkbox: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
// Generate a able and add corresponding columns
Datatable dt = new datatable ();
DT. Columns. Add ("ID ");
DT. Columns. Add ("author ");
DT. Columns. Add ("title ");
DT. Columns. Add ("posttime ");
DT. Columns. Add ("url ");
// Test data Filling
DT. rows. add (1, "ding Xue", "using JavaScript/CSS to achieve the alternating background color of a row in the gridview, click the row to change color ", "*************",
"*************************************** *******************************");
DT. Rows. Add (1, "ding Xue", "whimsy-about Microsoft's future ",
Http://www.cnblogs.com/dingxue/archive/2008/05/11/1191936.html ");
DT. Rows. Add (2, "ding Xue", "Cute Google translation, laughing at me ",
Http://www.cnblogs.com/dingxue/archive/2008/05/11/1191900.html ");
DT. Rows. Add (3, "ding Xue", "re-release after template modification ",
Http://www.cnblogs.com/dingxue/archive/2008/04/26/1171778.html ");
DT. Rows. Add (4, "ding Xue", "what do you want to buy vs buy! Why is the gap between ideal and reality so big? ",
Http://www.cnblogs.com/dingxue/archive/2008/04/13/1150952.html ");
DT. Rows. Add (5, "ding Xue", "XHTML/CSS Memory big test, both of which surpass me. I invite you to dinner! ",
Http://www.cnblogs.com/dingxue/archive/2008/04/03/xhtml_css_test.html ");
DT. Rows. Add (6, "ding Xue", "designer vs coder, who is the winner? "," 2008-03-26 07:44 ",
Http://www.cnblogs.com/dingxue/archive/2008/03/26/coder_vs_designer.html ");
DT. Rows. Add (7, "ding Xue", "simulate the pop-up window with div -- form scroll follow -- Ding Xue ",
Http://www.cnblogs.com/dingxue/archive/2007/09/03/879654.html ");
DT. Rows. Add (8, "ding Xue", "a simple but common table style-changing the color of the mouse over the line-concise implementation ",
Http://www.cnblogs.com/dingxue/archive/2007/08/09/848555.html ");
DT. Rows. Add (9, "ding Xue", "about IE7 always prompts when closing the window and the local preview solution before uploading the image ",
Http://www.cnblogs.com/dingxue/archive/2007/06/19/788449.html ");
DT. Rows. Add (10, "ding Xue", "bug in IE's support for the onchange event of the input element ",
Http://www.cnblogs.com/dingxue/archive/2007/03/23/684807.html ");
DT. Rows. Add (11, "ding Xue", "Super laugh bug of ie caused by verification controls ",
Http://www.cnblogs.com/dingxue/archive/2007/03/22/683401.html ");
DT. Rows. Add (12, "ding Xue", "scroll bar in Div is set to random position (CSS + JavaScript ",
Http://www.cnblogs.com/dingxue/archive/2007/03/18/678839.html ");
DT. Rows. Add (13, "ding Xue", "ASP. NET ajax1.0 trial: Web service call ",
Http://www.cnblogs.com/dingxue/archive/2007/03/17/678383.html ");
DT. Rows. Add (14, "ding Xue", "using skin in ASP. NET to introduce CSS ",
Http://www.cnblogs.com/dingxue/archive/2007/03/17/678374.html ");
// Bind the datatable to the gridview
Gvmeimingzi. datasource = DT;
Gvmeimingzi. databind ();
}
}
Sample file: Click here to download the sample file
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
