Stackoverflow.com | Use image or checkbox to include with text with asp:ListItem in Webforms and C#

Here is the link. 

 

So, if you want a list of check boxes, then you can drop is a checkboxlist (that sounds like a good name for a control, right?)

So, drop in the checkbox list and then you can choose edit items.

eg: enter image description here

The above just saves you doing this by hand.

And we get this:

        <style>

            .bigcheck input {

                width: 20px;

                height: 20px;

                vertical-align: middle;

                cursor: pointer;

                margin-right: 12px;                

        }

        </style>

        <br />

        <asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="bigcheck">

            <asp:ListItem Value="1">Dog</asp:ListItem>

            <asp:ListItem Value="2">Horse</asp:ListItem>

            <asp:ListItem Value="3">Garrffe</asp:ListItem>

        </asp:CheckBoxList>

And that gives you this:

enter image description here

so, that gives us check box, and also some text. Real easy, used the built in editors to create the above.

You can IGNORE the style part I added. It makes the check box much larger (I find the check boxes too small). And that style also shoves over the text a bit from the check box (the default is to scrunched up and close).

Now, maybe we want a image with each check box? ok, we can do this:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="bigcheck">

    <asp:ListItem Value="1" Text="Dog <img src='../Content/Animals/dogs.png' height='48' />"></asp:ListItem>

    <asp:ListItem Value="2" Text="Horse <img src='../Content/Animals/horses.png' height='48' />"  ></asp:ListItem>

    <asp:ListItem Value="3"  Text="Giraffe <img src='../Content/Animals/garaffe.png' height='48' />" ></asp:ListItem>

</asp:CheckBoxList>