asp.net - Reacting to click on ListItems in CheckboxList -

i apply logic page containing checkboxlist control when user checks or unchecks individual checkbox items. say, instance dynamically show or hide related control.

i came way using asp.net 2.0 callback mechanism (ajax) combination of client-side javascript , server-side logic in code-behind. however, solution not bullet-proof (i.e. suffers timing issues). not portable, because code needs know sequential ids of individual items, etc.

the code came separated in 2 functions, 1 handling onclick event, , other processing returned callback string :

<script type="text/javascript">  function oncheckboxclicked() {     // gathers semi-colon separated list of labels,     // associated checked items      var texts = '';      // iterate on each individual checkbox item     // items in checkboxlist sequential,     // stop iteration @ first missing sequence number      (var index = 0; index < 99; index++)     {         var checkbox = document.getelementbyid('ctl00_cphadmin_cblcategories_' + index);         if (checkbox == null)             break;          if (checkbox.checked)         {              // find label associated current checkbox item              var labels = document.getelementsbytagname('label');             (var index_ = 0; index_ < labels.length; index_ ++)             {                 if (labels[index_].htmlfor == checkbox.id)                 {                     texts = texts + labels[index_].innerhtml + ';';                     break;                 }             }         }     }      // perform callback request     // result processed updatecheckboxes function      webform_docallback('__page', '_checkbox' + texts, updatecheckboxes, 'checkbox', null, true /* synchronous */); } </script> 

in example, checkboxes match categories of blog post.

i need process resulting callback string containing list of semicolon-separated names of checkboxes check/uncheck, in order make sure related parent/child categories synchronized correctly. string results logic executed on server.

in other cases, resulting callback string might else.

<script type="text/javascript">  function updatecheckboxes(returnmessage, context) {     if (returnmessage == null || returnmessage == '')         return ;      // iterate on each individual checkbox item     // items in checkboxlist sequential,     // stop iteration @ first missing sequence number      (var index = 0; index < 99; index++)     {         var checkbox = document.getelementbyid('ctl00_cphadmin_cblcategories_' + index);         if (checkbox == null)             break;          // find label associated current checkbox item          var label = '';         var labels = document.getelementsbytagname('label');         (var index_ = 0; index_ < labels.length; index_ ++)         {             if (labels[index_].htmlfor == checkbox.id)             {                 label = ';' + labels[index_].innerhtml + ';';                 break;         }     }          // perform custom processing based on contents         // of returned callback string          // instance, here check whether returnmessage         // contains string ';' + label + ';'           if (returnmessage.indexof(label, 1) > 0)         {             //         }             } }  </script> 

isn't there more elegant solution problem?

i'd couple of things. one, i'd figure out way pass value needs passed client-side onclick handler. depending on how populating checkboxlist, might simple adding "onclick" attribute listitem checkbox calls function same value assigned label, 'oncheckboxclicked(this,'label'). eliminate need derive label, although on client side pretty referencing previous element of checkbox if passed reference (or parent, maybe, depends on whether label precedes input or input contained in it).

two, change passes current item being clicked , handle them 1 @ time.

assuming checkboxes (when rendered) like:

  <label for="something">checkbox 1</label>   <input type='checkbox' id='ctl00_....' value='1' onclick="oncheckboxclicked(this,'checkbox_1');" /> 

your functions might like:

function oncheckboxclicked(checkbox,identifier) {   // based on checkbox clicked    webform_docallback('__page', identifer, updatecheckboxes, {checkbox: checkbox.id, label: identifier } , null, true /* synchronous */); }  function updatecheckboxes(result,context) {    var checkbox = document.getelementbyid(context.checkbox);    var identifier = context.label;     if (result)  // ajax method returns true/false context holds info on controls    {        ... something...    } }