jQuery prop('checked') vs. CSS :checked

JavaScript performance comparison

Revision 50 of this test case created by jjj

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- 43 checkboxes total, 17 checked -->

<div id="container">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check" checked="checked">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
  <input type="checkbox" class="check">
</div>
      
<script>
Benchmark.prototype.setup = function() {
  $el = $('#container');

};

Benchmark.prototype.teardown = function() {
  $el = null;

};
</script>

Preparation code output

<!-- 43 checkboxes total, 17 checked --> <div id="container"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
.prop()
var checkboxes = $el.find('.check'),
  checkedCheckboxes = [],
  cbLen = checkboxes.length;

for(var i = 0; i < cbLen; i++) {
  if ($(checkboxes[i]).prop('checked')) {
    checkedCheckboxes.push(checkboxes[i]);
  }
}
pending…
CSS :checked
var checkedCheckboxes = $el.find('.check:checked'),
  finalCheckboxes = [],
  cbLen = checkedCheckboxes.length;

for(var i = 0; i < cbLen; i++) {
  finalCheckboxes.push(checkedCheckboxes[i]);
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

1 Comment

sdf commented :

asasdasdasd