Ways to determine if a checkbox is checked

Benchmark created by Nathaniel Lee on

Description

The native checked property obviously should be faster than jQuery's methods, but I'm curious to see by how much of a margin and which of jQuery's ways is fastest.

Note: I'm not bothering with the attr method since it corresponds to the initial state and not the running state of the checkbox.

Preparation HTML

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

Setup

var $container = $('#container');
    var $checkbox = $('<input type="checkbox"/>').appendTo($container);
    var checkbox = $checkbox.get(0);

Teardown


    $container.empty();

Test runner

Ready to run.

Testing in
TestOps/sec
Native
checkbox.checked = false;
if (checkbox.checked) {}

checkbox.checked = true;
if (checkbox.checked) {}
ready
jQuery is
checkbox.checked = false;
if ($checkbox.is(':checked')){}

checkbox.checked = true;
if ($checkbox.is(':checked')){}
ready
jQuery prop
checkbox.checked = false;
if ($checkbox.prop('checked')) {}

checkbox.checked = true;
if ($checkbox.prop('checked')) {}
ready

Revisions

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

  • Revision 1: published by Nathaniel Lee on