jQuery Checkbox Selector Test

Benchmark created by Yi Jiang on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="profile-list">
    
</div>
<script>
  var classes = ['email-checkout', 'absc', 'random', 'brrrr'];
  
  for (var i = 0; i < 2000; i++) {
   $('<input />').attr({
    type: 'checkbox',
    class: classes[Math.floor(Math.random() * classes.length)],
    checked: (Math.random() > .5)
   }).appendTo('#profile-list');
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Original
var elements = $("#profile-list input[type=checkbox].email-checkout:not(:checked)");

$.each(elements, function(i) {
 $(elements[i]).attr('checked', 'checked');
});
ready
New (:checkbox)
$("#profile-list :checkbox.email-checkout").each(function() {
 this.checked = true;
});
ready
New (input)
$("#profile-list input.email-checkout").each(function() {
 this.checked = true;
});
ready
New (input[type=checkbox])
$("#profile-list input[type=checkbox].email-checkout").each(function() {
 this.checked = true;
});
ready
New (class only)
$("#profile-list .email-checkout").each(function() {
 this.checked = true;
});
ready

Revisions

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

  • Revision 1: published by Yi Jiang on
  • Revision 2: published by Jake on