1
\$\begingroup\$

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:

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

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?

\$\endgroup\$
  • \$\begingroup\$ var checkboxes = $(…) and use that instead of querying every time. \$\endgroup\$ – Aleksei Zabrodskii Aug 25 '16 at 17:57
3
\$\begingroup\$
  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' />
</body>

\$\endgroup\$
1
\$\begingroup\$
// 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)
    body.addClass('checked');
  else
    body.removeClass('checked');
});
\$\endgroup\$
  • 1
    \$\begingroup\$ jQuery has toggleClass method \$\endgroup\$ – wOxxOm Aug 27 '16 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\$ – Aleksei Zabrodskii Aug 27 '16 at 6:20
  • \$\begingroup\$ A common misunderstanding. See the other answer. The method accepts a second parameter. \$\endgroup\$ – wOxxOm Aug 27 '16 at 6:22
  • \$\begingroup\$ @wOxxOm since it is so common to misunderstand this method, why use it in confusing context? \$\endgroup\$ – Aleksei Zabrodskii Aug 27 '16 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 Aug 27 '16 at 6:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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