Question

I am trying to capture the selected checkboxes in order to send that off via AJAX. But I am only getting the selected element one click to late; that is, my first click on a checkbox is not recognized by the “elm” loop as a checkbox being selected; only when I click a second time, it spits out that element. On a third click it spits out first and second click, but not third.

$(".datatype").mouseup(function() 
{
    /* check keyword */
    var searchbox = document.forms['formIndex'].searchbox.value;

    /* check datasetype */
    var vals = [], datasettype =  document.forms['formIndex']['datasettype[]'];
    for(var i=0,elm;elm = datasettype[i];i++)
    {
        alert(i + ': ' + elm.value);
        if(elm.checked)
        {
            alert(i + ': ' + elm.value);
            vals.push(elm.value);
        }
    }
    contents = vals.join(',');

HTML code:

<fieldset>
  <legend style="font-size: 1.2em; font-weight: bold; border: 1px solid aaa" for="selectedRegion">Data Set Type</legend>
  <input type="checkbox" class="datatype" name="datasettype[]" value="1">National<br />
  <input type="checkbox" class="datatype" name="datasettype[]" value="3">Sub-Regional<br />
  <input type="checkbox" class="datatype" name="datasettype[]" value="2">Regional<br />

Can anyone give me a hint why that would be? Thanks a lot for any help.

Answer 1

I think you need to use change event instead of mouseup

$(".datatype").change(function()