Detecting change in state of a group of checkboxes

by Leon

HTML

<input type="checkbox" name="id_1" id="id_1" value="id_1" checked="checked" />One<br>
<input type="checkbox" name="id_2" id="id_2" value="id_2" />Two<br>
<input type="checkbox" name="id_3" id="id_3" value="id_3" checked="checked" />Three<br><br>

<br>Same State?: <span id="show">true</span>

JavaScript

// initial state object 
var initial = $(':checkbox').map(function(){ 
  return this.checked 
});

// detect clicks to checkboxs, radiogroups...
$( ':checkbox' ).click(function() {
  // assign user input to a comparing object 
  var change = $(':checkbox').map(function(){ 
    return this.checked 
  });
  // compare the Objects and output the result
  $('#show').text( 
    JSON.stringify(initial) === JSON.stringify(change)
  );
});