Loop through table using jQuery, update specific cell in a row with a checked Checkbox

Question

I just can't work this one out. I have a table with a column of checkboxes. After an Ajax update, I want to update a specific cell in the rows with checked checkedboxes. The jQuery Ajax call I'm using is:

$.ajax({
        type: 'POST',
        url: 'ProcessDate',
        data: params,
        error: function(xhr, ajaxOptions, thrownError) {
               alert(xhr.statusText);
          },

         success: function(html) {
                  closeDialog();
                  $('#results tbody tr').each(function(){
                         $("#CaseID:checked").parent().siblings("td.DateUpdated").html('CHANGE'); 
            });
        },
        cache: false
     });

And the HTML is:

<table id="results">
  <tr>
     <td><input type="checkbox" id="CaseID"></td>
     <td id="DateUpdated"></td>
  </tr>
  <tr>
     <td><input type="checkbox" id="CaseID"></td>
     <td id="DateUpdated"></td>
  </tr>
  <tr>
     <td><input type="checkbox" id="CaseID"></td>
     <td id="DateUpdated"></td>
  </tr>

The Ajax call succeeds but my table update doesn't happen.

Answer 1

First, use classes since Ids must be unique, like this:

<tr>
  <td><input type="checkbox" class="CaseID"></td>
  <td class="DateUpdated"></td>
</tr>

Then use class selectors, like this:

$.ajax({
  type: 'POST',
  url: 'ProcessDate',
  data: params,
  error: function(xhr, ajaxOptions, thrownError) {
    alert(xhr.statusText);
  },
  success: function(html) {
    closeDialog();
    $(".CaseID:checked").parent().siblings("td.DateUpdated").html('CHANGE'); 
  },
  cache: false
});

There's no need for a .each() loop, at least not with your example code...the class selector will get all the elements you want, regardless of the row.