Use jQuery to force two checkboxes mirror each other's state RESTRICTION: jQuery 1.6.4 only, no other library, or version can be used.

My goal is to use jQuery to allow two input checkboxes behave the same.

For example: If 1st checkbox is checked, 2nd will be checked. If 1st is unchecked, 2nd will be unchecked. And vise versa. When either of the checkbox is checked, I will add a class to the HTML body tag, if it's unchecked, remove the class to the body tag.

HTML:

&lt;body&gt;
    &lt;input type="checkbox" checked='true' id='1'/&gt;
    &lt;input type="checkbox" checked='true' id='2'/&gt;
&lt;/body&gt;


I can't modify the input tags, that means I can't give it a class name. I can only use what is there. Meantime, I try to make as less jQuery calls as possible, in order to increase performance. I try to write as less code as possible, so I came up this piece of code:

jQuery:

$('input:checkbox').live('change', function () {
  $('input:checkbox').prop('checked', $(this).is(":checked"));
  if ($('input:checkbox').is(":checked")) {
    $('body').addClass('checked');
  } else {
    $('body').removeClass('checked');
  }
});


The code works, but I am not happy with it. I think it can be improved. I especially do not like the part $('input:checkbox'), I am concerned about the speed when querying the DOM with $('input:checkbox'). How can I improve? Any other problems?
As said in other answer, cache the DOM elements references so you don't have to dive into DOM to get the elements again and again on each check/uncheck of the checkboxes.
Use $(document.body) to refer to &lt;body&gt; element, this is slight faster. See this post.
Use a common class on all the interested checkboxes. $('input:checkbox') is a general selector and it'll select all the checkboxes on the page.
You can use toggleClass() with second param which can be used to decide whether to add or remove class from elements. If the second param is true class is added and if it is false class is removed.
As the checkboxes are by default checked, add the class on the &lt;body&gt; by default.
this.checked is faster than $(this).is(':checked'). It just checks the property on the current elements. Whereas in jQuery, it has to call the is() function and check if the passed argument status on the element.
IF POSSIBLE, update the jQuery version to latest one. It has many performance improvements and bug-fixes.


Live Demo:



// Cache the elements
var $myCheckbox = $('.myCheckbox'),
  $body = $(document.body);1

// On change of the checked state of checkbox
$myCheckbox.live('change', function() {
  // Update the checked property of all other checkboxes
  $myCheckbox.prop('checked', this.checked);

  // Add/Remove the class on body
  $body.toggleClass('checked', this.checked);
});
/* For DEMO purpose */
body.checked {
  background: green;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;

&lt;body class="checked"&gt;
  &lt;input type="checkbox" checked='true' class="myCheckbox" id='1' /&gt;
  &lt;input type="checkbox" checked='true' class="myCheckbox" id='2' /&gt;
&lt;/body&gt;