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.


    <input type="checkbox" checked='true' id='1'/>
    <input type="checkbox" checked='true' id='2'/>

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:


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

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?

  • \$\begingroup\$ var checkboxes = $(…) and use that instead of querying every time. \$\endgroup\$ Commented Aug 25, 2016 at 17:57

2 Answers 2

  1. 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.
  2. Use $(document.body) to refer to <body> element, this is slight faster. See this post.
  3. 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.
  4. 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.
  5. As the checkboxes are by default checked, add the class on the <body> by default.
  6. 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.
  7. 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;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<body class="checked">
  <input type="checkbox" checked='true' class="myCheckbox" id='1' />
  <input type="checkbox" checked='true' class="myCheckbox" id='2' />

// Don't run selectors every time.
const checkboxes = $('input:checkbox');
const body = $('body');

checkboxes.live('change', function () {
  // Remember the state and update all checkboxes.
  const checked = $(this).is(':checked');
  checkboxes.prop('checked', checked);

  // Toggle class.
  if (checked)
  • 1
    \$\begingroup\$ jQuery has toggleClass method \$\endgroup\$
    – woxxom
    Commented Aug 27, 2016 at 6:19
  • \$\begingroup\$ @wOxxOm it does, but it is not appropriate here, since we need to set it to checkbox value, not opposite of previous value. \$\endgroup\$ Commented Aug 27, 2016 at 6:20
  • \$\begingroup\$ A common misunderstanding. See the other answer. The method accepts a second parameter. \$\endgroup\$
    – woxxom
    Commented Aug 27, 2016 at 6:22
  • \$\begingroup\$ @wOxxOm since it is so common to misunderstand this method, why use it in confusing context? \$\endgroup\$ Commented Aug 27, 2016 at 6:23
  • \$\begingroup\$ It's common because people don't read documentation thoroughly, not because it's confusing and should be avoided. \$\endgroup\$
    – woxxom
    Commented Aug 27, 2016 at 6:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.