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

Revision 50 of this benchmark created by jjj on

Description

A quick test to see if filtering a list of checkboxes with prop('checked') or CSS :checked is faster with jQuery.

Preparation HTML

<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>

Setup

$el = $('#container');

Teardown


    $el = null;

Test runner

Ready to run.

Testing in
TestOps/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]);
  }
}
ready
CSS :checked
var checkedCheckboxes = $el.find('.check:checked'),
  finalCheckboxes = [],
  cbLen = checkedCheckboxes.length;

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

Revisions

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