Reacting to click on ListItems in CheckboxList
<p>I would like to apply some logic to a page containing a CheckBoxList control when the user checks or unchecks individual checkbox items. Say, for instance to dynamically show or hide a related control.</p>

<p>I came up with a way using ASP.Net 2.0 callback mechanism (AJAX) with a combination of client-side Javascript and server-side logic in the code-behind. However, this solution is not very bullet-proof (i.e. most likely suffers from timing issues). It is not portable, because the code needs to know the sequential ids of individual items, etc.</p>

<p>The code I came up with is separated in two functions, one handling the <code>onclick</code> event, and the other processing the returned callback string :</p>

<pre><code>&lt;script type="text/javascript"&gt;

function OnCheckBoxClicked()
{
    // gathers the semi-colon separated list of labels,
    // associated with the currently checked items

    var texts = '';

    // iterate over each individual checkbox item
    // items in a checkboxlist are sequential, so
    // stop iteration at the first missing sequence number

    for (var index = 0; index &lt; 99; index++)
    {
        var checkbox = document.getElementById('ctl00_cphAdmin_cblCategories_' + index);
        if (checkbox == null)
            break;

        if (checkbox.checked)
        {

            // find label associated with the current checkbox item

            var labels = document.getElementsByTagName('label');
            for (var index_ = 0; index_ &lt; labels.length; index_ ++)
            {
                if (labels[index_].htmlFor == checkbox.id)
                {
                    texts = texts + labels[index_].innerHTML + ';';
                    break;
                }
            }
        }
    }

    // perform callback request
    // result will be processed by the UpdateCheckBoxes function

    WebForm_DoCallback('__Page', '_checkbox' + texts, UpdateCheckBoxes, 'checkbox', null, true /* synchronous */);
}
&lt;/script&gt;
</code></pre>

<p>In this example, my checkboxes match categories of a blog post.</p>

<p>I need to process the resulting callback string as containing a list of semicolon-separated names of checkboxes to check/uncheck, in order to make sure that related parent/child categories are synchronized correctly. This string results from logic executed on the server.</p>

<p>In other cases, the resulting callback string might be something else.</p>

<pre><code>&lt;script type="text/javascript"&gt;

function UpdateCheckBoxes(returnmessage, context)
{
    if (returnmessage == null || returnmessage == '')
        return ;

    // iterate over each individual checkbox item
    // items in a checkboxlist are sequential, so
    // stop iteration at the first missing sequence number

    for (var index = 0; index &lt; 99; index++)
    {
        var checkbox = document.getElementById('ctl00_cphAdmin_cblCategories_' + index);
        if (checkbox == null)
            break;

        // find label associated with the current checkbox item

        var label = '';
        var labels = document.getElementsByTagName('label');
        for (var index_ = 0; index_ &lt; labels.length; index_ ++)
        {
            if (labels[index_].htmlFor == checkbox.id)
            {
                label = ';' + labels[index_].innerHTML + ';';
                break;
        }
    }

        // perform custom processing based on the contents
        // of the returned callback string

        // for instance, here we check whether the returnmessage
        // contains the string ';' + label + ';'


        if (returnmessage.indexOf(label, 1) &gt; 0)
        {
            // do something
        }        
    }
}

&lt;/script&gt;
</code></pre>

<p>Isn't there a more elegant solution to this problem?</p>
