jQuery checkbox undo solution

Question

<table> 
  <tr>
   <td>
    <div>
     <input type="checkbox" id="home1">Home1</input>
     <input type="checkbox" id="home2">Home3</input>
     <input type="checkbox" id="home3">Home3</input>
     <input type="checkbox" id="home4">Home4</input>
   </div>
  </td>
  <td id="selectedhome"> </td>
 </tr>
</table>

<input type="button" value="Select" />

In the above code onclick of the button all the selected values of the check box should appear in the selectedhome td with a undo link next to to it and be invisible from the first td.Onselect the undo button the checkbox should go back to the initial position.How to achieve this using jquery

Answer 1

Give this a try. It will reset each checkbox to the default checked value it had when the page loaded.

Example: http://jsfiddle.net/6kFMk/1/

  // Display ID value of checked boxes
$('input[value=Select]').click(function() {
    var values = $('table :checkbox:checked').map(function() {
        return this.id;
    }).get().join(',');
    var home = $('#selectedhome').text(values);
});

  // Reset checkboxes to initial state
$('input[value=Undo]').click(function() {
    $('table :checkbox').each(function() {
        this.checked = this.defaultChecked;
    });
});​