codetoad.com
  ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM 
Search Site:



Home » ASP » Article

ASP.NET : The checkbox and checkboxlist control

Article by: David Sussman, et al (7/8/2002)
Bookmark us now! Add to Favourites
Email a friend!Tell a friend
Summary: Checkboxes are similar to radio buttons, and in HTML, they were used to allow multiple choices from a group of buttons.
Viewed: 283804 times Rating (60 votes): 
 2.9 out of 5
 Rate this Article  Read Comments  Post Comments


Previous Page  Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10 Page 11  Page 13 Next Page  

The <asp:checkbox> and <asp:checkboxlist> Controls

Checkboxes are similar to radio buttons, and in HTML, they were used to allow multiple choices from a group of buttons. With the <asp:checkboxlist> control it is possible to create them in groups, but unlike radio buttons, it isn't possible to restrict the user to selecting just one possible answer from a group of checkboxes: they can select as many as they like. The other fundamental difference between a checkbox and a radio button is that once you have selected a checkbox you are able to deselect it by clicking on it again.

 

We're not going to spend too long examining them, as most of the same principles that we followed in the <asp:radiobutton> and <asp:radiobuttonlist> examples apply.

 

A typical <asp:checkbox> looks like this:

 

<asp:checkbox id="check1" runat="server" />

 

If we want to use an array of checkboxes, we can contain them inside an <asp:checkboxlist> control. We need to set an id attribute for the <asp:checkboxlist> control itself, and create a <asp:listitem> control for each option inside the control:

 

<asp:checkboxlist id="check1" runat="server">

  <asp:listitem id="option1" runat="server" value="Madrid" />

  <asp:listitem id="option2" runat="server" value="Oslo" />

  <asp:listitem id="option3" runat="server" value="Lisbon" />

</asp:checkboxlist>

 

Checkboxes are typically used when you have single yes/no answers, or you wish the user to be able to make a multiple set of selections, and be able to deselect them as well.

 

In our next exercise, we're going to tweak our previous example, so that it uses our established holiday code to allow the user to select more than one option for a particular destination.


 

Try It Out – Using the <asp:checkbox> Control

1.       Open up the radiopage.aspx and amend the code highlighted in gray, as follows:

<script runat="server" language="C#">

  void Page_Load()

  {

    string msg = "You have selected the following items:<br />";

 

    if (check1.Items[0].Selected) {

    msg = msg + check1.Items[0].Text + "<br />";

    }

    if (check1.Items[1].Selected) {

    msg = msg + check1.Items[1].Text + "<br />";

    }

    if (check1.Items[2].Selected) {

    msg = msg + check1.Items[2].Text + "<br />";

    }

   

    Message.Text = msg;

  }   

</script>

<html>

<head>

  <title>Check Box List Example</title>

</head>

<body>

  <asp:label id="Message" runat="server" />

  <br /><br />

  Which city do you wish to look at hotels for?

  <br /><br />

  <form runat="server">

    <asp:checkboxlist id="check1" runat="server">

      <asp:listitem id="option1" runat="server" value="Madrid" />

      <asp:listitem id="option2" runat="server" value="Oslo" />

      <asp:listitem id="option3" runat="server" value="Lisbon" />

    </asp:checkboxlist>

    <br /><br />

    <input type="Submit">

  </form>

</body>

</html>

 

2.       Save this as checkpage.aspx.


 

3.       Open checkpage.aspx in your browser, and select more than one option:

 

 

4.       Then click on Submit Query:

 


 

How It Works

Very little has changed with our control – all we've done is change the HTML control to an <asp:checkboxlist>, and then change the name of the control to reflect this:

 

<asp:checkboxlist id="check1" runat="server">

  <asp:listitem id="option1" runat="server" value="Madrid" />

  <asp:listitem id="option2" runat="server" value="Oslo" />

  <asp:listitem id="option3" runat="server" value="Lisbon" />

</asp:checkboxlist>

 

Our ASP.NET code is the same as that we used for the listbox2.aspx example, earlier on, except that here it refers to a checkbox rather than a listbox:

 

    string msg = "You have selected the following items:<br />";

 

    if (check1.Items[0].Selected) {

    msg = msg + check1.Items[0].Text + "<br />";

    }

    if (check1.Items[1].Selected) {

    msg = msg + check1.Items[1].Text + "<br />";

    }

    if (check1.Items[2].Selected) {

    msg = msg + check1.Items[2].Text + "<br />";

    }

   

    Message.Text = msg;

 

As you can see, checkboxes work in a slightly different way from radio buttons. Each time you add a value, rather than replacing it, the value is added to the contents of check1. However, for all other intents and purposes, you use them in the same way.

 

This operation will become clearer once you're familiar with Chapters 4 and 6 in which we deal with Data and Control Structures respectively.

 

One last point to note about checkboxes, though, is that you might want to treat each checkbox within a group as a separate entity, rather than have them all grouped together, in which case you could set all of them as separate <asp:checkbox> controls to reflect this:

 

<asp:checkbox id="check1" runat="server" Text="Madrid"/>

<asp:checkbox id="check2" runat="server" Text="Oslo"/>

<asp:checkbox id="check3" runat="server" Text ="Lisbon"/>

 

The text attribute here specifies the text that will appear next to the checkbox. The checkbox itself will not return a value. To find out whether it is checked or not we need to add some ASP.NET code to test if the Checked attribute is true or false: it will be true if the checkbox is checked.

 

Given that we've introduced a number of new concepts, in variables, we will stop here, as the subject of variables warrants a chapter in its own right. We've looked at the most basic server controls, and in order to make any more of them, we need to introduce new and more complex features.

Previous Page  Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10 Page 11  Page 13 Next Page  




Click here to Buy!

Buy Beginning ASP.NET with C# here

© Copyright 2002 Wrox Press This chapter is written by David Sussman, et al and taken from "Beginning ASP.NET with C#" published by Wrox Press Limited in June 2002; ISBN 1861007345; copyright © Wrox Press Limited 2002; all rights reserved.

No part of these chapters may be reproduced, stored in a retrieval system or transmitted in any form or by any means -- electronic, electrostatic, mechanical, photocopying, recording or otherwise -- without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.






CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums
Rate this article:     Poor Excellent
View highlighted Comments
User Comments on 'ASP.NET : The checkbox and checkboxlist control'
Posted by :  Archive Import (Bart) at 05:41 on Thursday, October 10, 2002
I have made a form and in that form there is a checkbox. I don't want that the users change the checkbox.
How can block my checkbox with asp?
Posted by :  Archive Import (Rodolpho Brock) at 13:19 on Wednesday, December 04, 2002
I wanna know the valus of the items in checkboxlist in client-side using a javascript, did you know how I can do it?
Posted by :  Archive Import ( "SANJAY" <Title>) </a> at 06:14 on Wednesday, January 29, 2003 </b> </td></tr> <tr><td> <a name=871></a><blockquote><Title> "SANJAY" <Title> </blockquote> </td></tr></table></td></tr> <script language=javascript> htext.style.visibility='hidden' </script> </td></tr> </table> </td></tr> </table> <br><br> To post comments you need to <a href=/members/default.asp>become a member</a>. If you are already a member, please <a href=/members/login.asp?url=http://www.codetoad.com/asp.net/aspnetcontrols12.asp?>log in </a>. <BR> <BR><a href=/members/default.asp><img src=/images/join_sq.png border=0></a> <a href=/members/login.asp?url=http://www.codetoad.com/asp.net/aspnetcontrols12.asp?><img src=/images/login_sq.png border=0></a> <br><br><br><br> <table> <TR width=100%><TD width=100% bgcolor=eeeeee align=center><b><font size=3>RELATED ARTICLES</font></b></TD></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_filesystemobject.asp">ASP FilesystemObject</a><br>by <b>Jeff Anderson</b> <br> An introduction to the Filesystemobject</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_filesys_gettempname.asp">ASP GetTempName</a><br>by <b>Jeff Anderson</b> <br> Use the GetTempName method to create a randomly generated temporary file on the server.</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_filesys_opentextfile.asp">ASP OpenTextFile</a><br>by <b>Jeff Anderson</b> <br> An introduction to the OpenTextFile Method of the FileSystemObject</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp/format_date_time.asp">ASP Format Date and Time Script</a><br>by <b>Jeff Anderson</b> <br> An ASP script showing the variety of date and time formats possible using the FormatDateTime Function.</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_email_reg_exp.asp">Email validation using Regular Expression</a><br>by <b>Jeff Anderson</b> <br> Using regular expression syntax is an exellent way to thoroughly validate an email. It's possible in ASP.</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_filesys_fileexists.asp">ASP FileExists</a><br>by <b>Jeff Anderson</b> <br> An introduction to the FileExistsMethod of the FileSystemObject</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_excel.asp">Creating a Dynamic Reports using ASP and Excel</a><br>by <b>Jeff Anderson</b> <br> A simple way to generate Excel reports from a database using Excel.</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_sql_concatenate.asp">Concatenate strings in sql</a><br>by <b>Jeff Anderson</b> <br> A brief introduction to concatenating strings in an sql query (using SQL server or access databases).</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_converting_time.asp">Add or Subtract Hours in SQL or ASP using DateAdd</a><br>by <b>Jeff Anderson</b> <br> A beginners guide to using the SQL DATEADD function to add or subtract hours. Particularly useful when setting the time displayed on the ASP page to a different time zone (eg when the server is in the US, and the site is for a UK audience).</font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> <tr ><td width="100%"><font size=1> <a href="http://www.codetoad.com/asp_filesystemobject_createtextfile.asp">ASP CreateTextFile</a><br>by <b>Jeff Anderson</b> <br> An explanation of the CreateTextFile Method, part of the ASP FileSystemObject </font></td> </tr> <tr height=3 bgcolor=ffffff><td height=3 colspan=2><img src=images/sp.gif height=3></td></tr> </table> </td></tr></table></td></tr></table> <table align=center width=100% cellpadding=0 cellspacing=0 border=0> <tr> <td width=100% align=center> <BR><BR><BR><BR><BR><BR><BR><BR> <table> <TR> <TD align=middle><FONT face="MS Sans serif, arial, verdana,helvetica" color=#000000 size=-3><B>Recent Forum Threads</B></FONT> </TD> </TR> <tr><td align=center> <table width=100% cellpadding=0 cellspacing=0 bgcolor=white> <tr bgcolor=#ffffff><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/24_28541.asp>C++</a></td></tr> <tr bgcolor=#eeeeee><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/15_25443.asp>Re: refresh parent after closing pop up window</a></td></tr> <tr bgcolor=#ffffff><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/23_28539.asp>Dynamic Insertion</a></td></tr> <tr bgcolor=#eeeeee><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/26_28538.asp>Date and Time function around the world???</a></td></tr> <tr bgcolor=#ffffff><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/14_28537.asp>Significant Factors</a></td></tr> <tr bgcolor=#eeeeee><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/25_28536.asp>Perl array access</a></td></tr> <tr bgcolor=#ffffff><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/24_28431.asp>Re: huffman encoding and decoding in C++...</a></td></tr> <tr bgcolor=#eeeeee><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/25_28533.asp>Perl One Liner: Replace {( </a></td></tr> <tr bgcolor=#ffffff><td valign=top>• </td><td><a style="font-size:10px" href=http://www.codetoad.com/forum/26_28530.asp>Re: html including php, accessing the functions</a></td></tr> </table> <BR><BR> </td></tr> <TR> <TD align=middle><FONT face="MS Sans serif, arial, verdana,helvetica" color=#000000 size=-3><B>Recent Articles</B></FONT> </TD> </TR> <tr><td align=center> <table width=100% cellpadding=0 cellspacing=0 bgcolor=white> <tr bgcolor=#ffffff><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_filesys_gettempname.asp>ASP GetTempName </a></td></tr> <tr bgcolor=#eeeeee><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_utf8.asp>Decode and Encode UTF-8</a></td></tr> <tr bgcolor=#ffffff><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_filesys_getfile.asp>ASP GetFile</a></td></tr> <tr bgcolor=#eeeeee><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_filesys_folderexists.asp>ASP FolderExists </a></td></tr> <tr bgcolor=#ffffff><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_filesys_fileexists.asp>ASP FileExists</a></td></tr> <tr bgcolor=#eeeeee><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_filesys_opentextfile.asp>ASP OpenTextFile </a></td></tr> <tr bgcolor=#ffffff><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_filesystemobject.asp>ASP FilesystemObject</a></td></tr> <tr bgcolor=#eeeeee><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_filesys_createfolder.asp>ASP CreateFolder</a></td></tr> <tr bgcolor=#ffffff><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/asp_filesystemobject_createtextfile.asp>ASP CreateTextFile</a></td></tr> <tr bgcolor=#eeeeee><td valign=top><img src=http://www.codetoad.com/images/article.gif></td><td><a style="font-size:10px" href=http://www.codetoad.com/javascript_get_selected_text.asp>Javascript Get Selected Text</a></td></tr> </table> </td></tr> </table> <BR><BR> </td> </tr></table> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR> <TD bgcolor=#FFFBDE height=15> <DIV class=menu_links>  <A class=menu_text href="/help/submit_a_link.asp" target=_top>submit a link</A><SPAN style="FONT-SIZE: smaller">  - </SPAN> <A class=menu_text href="/help/privacy.asp" target=_top>privacy</A><SPAN style="FONT-SIZE: smaller">  - </SPAN> <A class=menu_text href="/help/contact.asp" target=_top>contact</A><SPAN style="FONT-SIZE: smaller">  - </SPAN> <A class=menu_text href="/help/advertise.asp" target=_top>advertise</A><SPAN style="FONT-SIZE: smaller">  - </SPAN> <A class=menu_text href="/links_page.asp" target=_top>hot links</A><SPAN style="FONT-SIZE: smaller">  - </SPAN> <A class=menu_text href="/help/link_to_us.asp" target=_top>link to us</A><SPAN style="FONT-SIZE: smaller">  - </SPAN> <A class=menu_text href="/wizard" target=_top>submit your article</A><SPAN style="FONT-SIZE: smaller">  </SPAN> </DIV></TD> </tr> </table> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TD bgcolor="003399"><IMG height=1 alt="" src="images/sp.gif" width=9></TD> <TD bgcolor="003399" width=1920><IMG height=1 alt="" src="images/sp.gif" width=739></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=3 width="100%" border=0> <TBODY> <TR> <TD align=center bgcolor="003399" noWrap height=9><font face="MS Sans serif" color=white size=-3>© Copyright codetoad.com 2001-2009</font></TD></TR></TBODY></TABLE> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-1281712-6"); pageTracker._initData(); pageTracker._trackPageview(); </script> </BODY></HTML> </BODY></HTML>