Access checked checkboxes

JavaScript performance comparison

Test case created by Brunoais

Info

Which way is the best to get the checked checkboxes and radioboxes?

Preparation code

<p>
        <form action="" id="testform">
                <div>
                        <label ><input type="text" name="inputText1"/></label>
                        <input type="text" name="inputText2"/>
                        <input type="text" name="inputText3"/>
                        <input type="text" name="inputText4"/>
                        <input type="text" name="inputText5"/>
                       
                        <label><input type="checkbox" name="checkboxGroup1[]"/></label>
                        <input type="checkbox" checked name="checkboxGroup1[]"/>
                        <input type="checkbox" name="checkboxGroup1[]"/>
                        <input type="checkbox" name="checkboxGroup1[]"/>
                        <input type="checkbox" checked name="checkboxGroup1[]"/>
                       
                        <input type="checkbox" name="checkboxGroup2[]"/>
                        <input type="checkbox" checked name="checkboxGroup2[]"/>
                        <input type="checkbox" name="checkboxGroup2[]"/>
                        <input type="checkbox" checked name="checkboxGroup2[]"/>
                        <input type="checkbox" name="checkboxGroup2[]"/>
                       
                        <label >text<input type="radio" name="radioboxGroup1"/></label>
                        <input type="radio" name="radioboxGroup1"/>
                        <input type="radio" name="radioboxGroup1"/>
                        <input type="radio" name="radioboxGroup1"/>
                        <input type="radio" checked name="radioboxGroup1"/>
                       
                        <input type="password" name="pass"/>
                        <input type="password" name="pass"/>
                       
                        <input type="radio" name="radioboxGroup2"/>
                        <input type="radio" name="radioboxGroup2"/>
                        <input type="radio" checked name="radioboxGroup2"/>
                        <input type="radio" name="radioboxGroup2"/>
                        <input type="radio" name="radioboxGroup2"/>
                        <button type="submit">submit</button>
                </div>
        </form>
</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Simple selector
$(':checked');
pending…
Specifying it's an input
$('input:checked');
pending…
Be specific
$('#testform input:checked');
pending…
get the id and then the checked ones
$('#testform').filter(':checked');
pending…
Now also specify input
$('#testform').filter('input:checked');
pending…
Everything separated
$('#testform').filter('input').filter(':checked');
pending…
simple querySelectorAll
document.querySelectorAll(':checked');
pending…
complete querySelectorAll
document.querySelectorAll('#testform input:checked');
pending…
getElementById + unspecific querySelectorAll
document.getElementById('testform').querySelectorAll(':checked');
pending…
getElementById + querySelectorAll
document.getElementById('testform').querySelectorAll('input:checked');
pending…

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

Compare results of other browsers

0 comments

Add a comment