Asp.net Javascript gets the value of CheckBoxList

In the future, I will write out what I learned during this period and share it with you. This article is also a note at work. I hope to give some help to my friends who have encountered the same problem.
In the development work, because CheckBoxList is used to operate in js on the client, no matter how js is debugged, the value of value cannot be obtained. It was very depressing. Later, Google went down to the CodeProject, lucky. We place the following code on the webpage:
Copy codeThe Code is as follows:
<Asp: CheckBoxList runat = "server" ID = "chkDemo" RepeatDirection = "Horizontal" RepeatLayout = "Flow"> <asp: listItem Text = "test A" Value = "A"> </asp: ListItem>
<Asp: ListItem Text = "Test B" Value = "B"> </asp: ListItem>
<Asp: ListItem Text = "Test C" Value = "C"> </asp: ListItem>
<Asp: ListItem Text = "test D" Value = "D"> </asp: ListItem>
<Asp: ListItem Text = "Test E" Value = "E"> </asp: ListItem>
</Asp: CheckBoxList>

After the browser shows the code, let's look at the Html Script:
<Table id = "chkDemo" border = "0">
<Tr> <td> <input id = "chkDemo_0" type = "checkbox" name = "chkDemo $0"/> <label for = "chkDemo_0"> test A </label> </td>
<Td> <input id = "chkDemo_1" type = "checkbox" name = "chkDemo $1"/> <label for = "chkDemo_1"> Test B </label> </ td>
<Td> <input id = "chkDemo_2" type = "checkbox" name = "chkDemo $2"/> <label for = "chkDemo_2"> test C </label> </ td>
<Td> <input id = "chkDemo_3" type = "checkbox" name = "chkDemo $3"/> <label for = "chkDemo_3"> test D </label> </ td>
<Td> <input id = "chkDemo_4" type = "checkbox" name = "chkDemo $4"/> <label for = "chkDemo_4"> test E </label> </ td> </tr> </table>
This Html Script may differ in RepeatLayout settings, but it has one thing in common: the generated CheckBox has no value attribute,
Therefore, you cannot obtain the value using js on the client.
To solve this problem, we need to extend the CheckBoxList: this is the source code I found on CodeProject. After a long time, the link will not be pasted.
Copy codeThe Code is as follows:
[ToolboxData ("<{0}: CheckBoxListEx runat = \" server \ "> </{0}: CheckBoxListEx>")]
Public class CheckBoxListEx: CheckBoxList, IRepeatInfoUser
{
Void IRepeatInfoUser. RenderItem (ListItemType itemType, int repeatIndex, RepeatInfo repeatInfo, HtmlTextWriter writer)
{
String clientID = UniqueID + this. ClientIDSeparator + repeatIndex. ToString (NumberFormatInfo. InvariantInfo); // var

Writer. WriteBeginTag ("input ");
Writer. WriteAttribute ("type", "checkbox ");
Writer. WriteAttribute ("name", UniqueID + this. IdSeparator + repeatIndex. ToString (NumberFormatInfo. InvariantInfo ));
Writer. WriteAttribute ("id", clientID );
Writer. WriteAttribute ("value", Items [repeatIndex]. Value );
If (Items [repeatIndex]. Selected)
Writer. WriteAttribute ("checked", "checked ");

System. Web. UI. AttributeCollection attrs = Items [repeatIndex]. Attributes;
Foreach (string key in attrs. Keys)
{
Writer. WriteAttribute (key, attrs [key]);
}
Writer. Write ("/> ");
Writer. Write ("<label for = '" + clientID + "'> ");
Writer. Write (Items [repeatIndex]. Text );
Writer. Write ("</label> ");

}

I have modified the above Code, which is different from the original one: Generation of clientID and addition of the Checked attribute. I don't need to explain this code in detail.
Compile it into a separate class and it will automatically appear on the Toolbox. Just like using the normal CheckBoxList, you can drag it to the page.
On the client side, the value of js is roughly as follows:
Copy codeThe Code is as follows:
<Script>
Function getDemoValue ()
{Var els = document. getElementById ("chkDemo"); var vals = ''; if (els! = Null) {var chks = els. getElementsByTagName ("input"); for (var k = 0, len = chks. length; k <len; k ++) {var chk = chks [k]; if (chk! = Null & chk. type = 'checkbox' & chk. checked) {vals + = ',' + chk. value ;}}}
If (vals. length> 1)
Vals = vals. substring (1 );
Return vals;
}
</Script>

End