Skip to main content
Code Review

Return to Answer

replaced http://stackoverflow.com/ with https://stackoverflow.com/
Source Link
  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 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>

  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>

  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>

Source Link
Tushar
  • 3k
  • 1
  • 22
  • 28
  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>

default

AltStyle によって変換されたページ (->オリジナル) /