Appending HTML tags to ASP.NET Listbox / Checkboxlist

I'm hoping to add some html on either side of the output of a Listbox control so that it looks something like this:

<div class="scroll_tickbox">

                            <div class="option first"><label><input type="checkbox" value="1" title="Active Retirement Network" />Active Retirement Network</label></div><br />

                            <div class="option"><label><input type="checkbox" value="2" title="Boardmatch" />Boardmatch</label></div><br />
                            <div class="option"><label><input type="checkbox" value="3" title="Border Counties Childcare Network" />Border Counties Childcare Network</label></div><br />
                            <div class="option"><label><input type="checkbox" value="4" title="Carmichael Centre for Voluntary Groups" />Carmichael Centre for Voluntary Groups</label></div><br />


                            <div class="option"><label><input type="checkbox" value="26" title="Volunteer Centres Ireland" />Volunteer Centres Ireland</label></div><br />
                        </div><!--scroll_tickbox-->

At the moment I'm getting an output like this

<table id="ctl00_MainContent_CertifiedStandards" class="multipleselect uniform" SelectionMode="Multiple" border="0" style="height:115px;">
<tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_0" type="checkbox" name="ctl00$MainContent$CertifiedStandards$0" /><label for="ctl00_MainContent_CertifiedStandards_0">PQASSO</label></td>
</tr><tr>

    <td><input id="ctl00_MainContent_CertifiedStandards_1" type="checkbox" name="ctl00$MainContent$CertifiedStandards$1" checked="checked" /><label for="ctl00_MainContent_CertifiedStandards_1">Fund raising</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_2" type="checkbox" name="ctl00$MainContent$CertifiedStandards$2" /><label for="ctl00_MainContent_Certifi开发者_JAVA技巧edStandards_2">Corporate governance</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_3" type="checkbox" name="ctl00$MainContent$CertifiedStandards$3" checked="checked" /><label for="ctl00_MainContent_CertifiedStandards_3">Child protection</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_4" type="checkbox" name="ctl00$MainContent$CertifiedStandards$4" checked="checked" /><label for="ctl00_MainContent_CertifiedStandards_4">Use of images</label></td>

</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_5" type="checkbox" name="ctl00$MainContent$CertifiedStandards$5" checked="checked" /><label for="ctl00_MainContent_CertifiedStandards_5">HIV/Aids</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_6" type="checkbox" name="ctl00$MainContent$CertifiedStandards$6" /><label for="ctl00_MainContent_CertifiedStandards_6">NGDO charter</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_7" type="checkbox" name="ctl00$MainContent$CertifiedStandards$7" /><label for="ctl00_MainContent_CertifiedStandards_7">Volunteering and humanitarian aid</label></td>
</tr><tr>

    <td><input id="ctl00_MainContent_CertifiedStandards_8" type="checkbox" name="ctl00$MainContent$CertifiedStandards$8" /><label for="ctl00_MainContent_CertifiedStandards_8">Human resources</label></td>
</tr>

using code like this

public void BuildListboxes()
{
    //Bind items for Certified Standards listbox
    CertifiedStandards.DataSource = GetCertifiedStandards();
    CertifiedStandards.DataValueField = "ID";
    CertifiedStandards.DataTextField = "name";
    CertifiedStandards.DataBind();
}

public DataTable GetCertifiedStandards()
{
    SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString);
    con.Open();
    SqlCommand com = new SqlCommand("spGetCertifiedStandards", con);
    com.CommandType = CommandType.StoredProcedure;
    SqlDataAdapter ada = new SqlDataAdapter(com);
    DataTable dt = new DataTable();
    ada.Fill(dt);
    return dt;
}

The reason I want to do this is to add some jQuery control to these checkboxes.

If anybody has any tips on how to achieve this I'd really appreciate this.

Thanks, Andrew

With JQuery you don't have to do things like :

<input type='checkbox' class='option' ... onclick='runJqueryFunction(this);' />

Why don't you wire-up your GUI elements to JQuery code with the standard:

`$(function(){
    //Do your wiring up here, either to IDs of elements or style classes

    $('.option').change(function(){//Runs when an object with class='option' changes value.
    alert('I am a checkbox with an ID = ' + $(this).attr('id'));
});

$('#MyCheckbox1001').change(function(){//Runs when an object with ID='MyCheckbox1001' changes value.
    alert('I am a checkbox with an ID = ' + $(this).attr('id'));
});

});'

EDIT:

Its probably best if you use scoping to restrict your selector.

E.g.

$(".option") matches ANY object with class='option' on your page. IF you have a page that looks like this:

<div class="scroll_tickbox" id='patricksDiv1'>
    <input type='checkbox' class='option' value='1' />
    <input type='checkbox' class='option' value='2' />
</div>

<div class="scroll_tickbox" id='patricksDiv2'>
    <input type='checkbox' class='option' value='3' />
    <input type='checkbox' class='option' value='4' />
</div>

$('.scroll_tickbox .option') will match any object with class='option' that is INSIDE an element with class='scroll_tickbox' and would give you 4 items.

$('#patricsDiv1 .option') will match any object with class='option' that is inside an element with ID = 'patricksDiv1' (2 items) - this can be used to restrict what your JQuery methods are running on since IDs must be unique inside an HTML document.