Geek Answers Handbook

What is the fastest way to select a large number of checkboxes and select / select them?

Since I use jQuery 1.3+ all but one time test, this is used. The other is plain javascript, which I found back in 2000. I stopped on this route since he spent about 150 seconds to run the test. I read several jQuery optimization web pages that relate to single element selection. "#id" is the best example to use this, but now I have the problem of checking all the checkboxes in one column in a fairly large table with multiple checkbox columns .

What I did was set up a page that creates 20,000 rows of a table with two columns of check boxes. The goal is to check in the second column how much time it took, and then uncheck them and see how much time has passed. Obviously, we want the lowest time. I use only IE6 and 7, and in my case all my users will do the same.

20,000 lines that you speak? This is what I also said, but it happens at the factory (from my hands), and it is too late to change. I'm just trying to quit the city of Mary with the remaining 1 second on the clock. Also, I found out that input.chkbox is not the fastest selector (for IE7)! :)

The question is, is there a better way to do this jQuery or otherwise? I would like it to work in less than half a second on my car.

So you don’t have to repeat all the crap that I already did here in the test material I came up with:

Updated Morning 4/14 to include further time tests:

<form id="form1" runat="server">
<div>           
        <a href="#" id="one">input[id^='chkbox'][type='checkbox']</a><br />
        <a href="#" id="two">#myTable tr[id^='row'] input[id^='chkbox'][type='checkbox']</a><br />
        <a href="#" id="three">#myTable tr.myRow input[id^='chkbox'][type='checkbox']</a><br />
        <a href="#" id="four">tr.myRow input[id^='chkbox'][type='checkbox']</a><br />
        <a href="#" id="five">input[id^='chkbox']</a><br />
        <a href="#" id="six">.chkbox</a><br />
        <a href="#" id="seven">input.chkbox</a><br />
        <a href="#" id="eight">#myTable input.chkbox</a><br />

        <a href="#" id="nine">"input.chkbox", "tr"</a><br />
        <a href="#" id="nine1">"input.chkbox", "tr.myRow"</a><br />
        <a href="#" id="nine2">"input.chkbox", "#form1"</a><br />
        <a href="#" id="nine3">"input.chkbox", "#myTable"</a><br />

        <a href="#" id="ten">input[name=chkbox]</a><br />
        <a href="#" id="ten1">"input[name=chkbox]", "tr.myRow"</a><br />
        <a href="#" id="ten2">"input[name=chkbox]", "#form1"</a><br />
        <a href="#" id="ten3">"input[name=chkbox]", "#myTable"</a><br />

        <a href="#" id="ten4">"input[name=chkbox]", $("#form1")</a><br />
        <a href="#" id="ten5">"input[name=chkbox]", $("#myTable")</a><br />

        <a href="#" id="eleven">input[name='chkbox']:checkbox</a><br />
        <a href="#" id="twelve">:checkbox</a><br />
        <a href="#" id="twelve1">input:checkbox</a><br />
        <a href="#" id="thirteen">input[type=checkbox]</a><br />

        <div>
            <input type="text" id="goBox" /> <button id="go">Go!</button>
            <div id="goBoxTook"></div>
        </div>

        <table id="myTable">
            <tr id="headerRow"><th>Row #</th><th>Checkboxes o' fun!</th><th>Don't check these!</th></tr>
            <% for(int i = 0; i < 20000;i++) { %>
            <tr id="row<%= i %>" class="myRow">
                <td><%= i %> Row</td>
                <td>
                    <input type="checkbox" id="chkbox<%= i %>" name="chkbox" class="chkbox" />
                </td>
                <td>
                    <input type="checkbox" id="otherBox<%= i %>" name="otherBox" class="otherBox" />
                </td>
            </tr>
            <% } %>
        </table>
</div>
        <script type="text/javascript" src="<%= ResolveUrl("~/") %>Javascript/jquery.1.3.1.min.js"></script>
        <script type="text/javascript">

            $(function() {                  
                function run(selectorText, el) {                    
                    var start = new Date();                     
                    $(selectorText).attr("checked", true);                              
                    var end = new Date();
                    var timeElapsed = end-start;
                    $(el).after("<br />Checking Took " + timeElapsed + "ms");

                    start = new Date();                     
                    $(selectorText).attr("checked", false);                             
                    end = new Date();
                    timeElapsed = end-start;
                    $(el).after("<br />Unchecking Took " + timeElapsed + "ms");
                }       

                function runWithContext(selectorText, context, el) {                    
                    var start = new Date();                     
                    $(selectorText, context).attr("checked", true);                             
                    var end = new Date();
                    var timeElapsed = end-start;
                    $(el).after("<br />Checking Took " + timeElapsed + "ms");

                    start = new Date();                     
                    $(selectorText, context).attr("checked", false);                                
                    end = new Date();
                    timeElapsed = end-start;
                    $(el).after("<br />Unchecking Took " + timeElapsed + "ms");
                }

                $("#one").click(function() {                        
                    run("input[id^='chkbox'][type='checkbox']", this);
                });

                $("#two").click(function() {
                    run("#myTable tr[id^='row'] input[id^='chkbox'][type='checkbox']", this);
                });

                $("#three").click(function() {
                    run("#myTable tr.myRow input[id^='chkbox'][type='checkbox']", this);
                });

                $("#four").click(function() {
                    run("tr.myRow input[id^='chkbox'][type='checkbox']", this);
                });

                $("#five").click(function() {
                    run("input[id^='chkbox']", this);
                });

                $("#six").click(function() {
                    run(".chkbox", this);
                });

                $("#seven").click(function() {
                    run("input.chkbox", this);
                });

                $("#eight").click(function() {
                    run("#myTable input.chkbox", this);
                });

                $("#nine").click(function() {
                    runWithContext("input.chkbox", "tr", this);
                });


                $("#nine1").click(function() {
                    runWithContext("input.chkbox", "tr.myRow", this);
                });
                $("#nine2").click(function() {
                    runWithContext("input.chkbox", "#form1", this);
                });
                $("#nine3").click(function() {
                    runWithContext("input.chkbox", "#myTable", this);
                });

                $("#ten").click(function() {
                    run("input[name=chkbox]", this);
                });                 

                $("#ten1").click(function() {
                    runWithContext("input[name=chkbox]", "tr.myRow", this);
                });

                $("#ten2").click(function() {
                    runWithContext("input[name=chkbox]", "#form1", this);
                });

                $("#ten3").click(function() {
                    runWithContext("input[name=chkbox]", "#myTable", this);
                });

                $("#ten4").click(function() {
                    runWithContext("input[name=chkbox]", $("#form1"), this);
                });

                $("#ten5").click(function() {
                    runWithContext("input[name=chkbox]", $("#myTable"), this);
                });

                $("#eleven").click(function() {
                    run("input[name='chkbox']:checkbox", this);
                });

                $("#twelve").click(function() {
                    run(":checkbox", this);
                });

                $("#twelve1").click(function() {
                    run("input:checkbox", this);
                });

                $("#thirteen").click(function() {
                    run("input[type=checkbox]", this);
                });

                $('#go').click(function() {
                    run($('#goBox').val(), this);
                });
            });
        </script>
</form>
+5
source share
4 answers

input [name = chkbox] comes in as the fastest jQuery selector on my machine in IE7.

Unchecking Took 2453ms
Checking Took 2438ms
Unchecking Took 2438ms
Checking Took 2437ms
Unchecking Took 2453ms
Checking Took 2438ms

input.chkbox and ...

Unchecking Took 2813ms
Checking Took 2797ms
Unchecking Took 2797ms
Checking Took 2797ms
Unchecking Took 2813ms
Checking Took 2797ms

input: checkbox.chkbox seems related

Unchecking Took 2797ms
Checking Took 2797ms
Unchecking Took 2813ms
Checking Took 2781ms

.chkbox is almost twice as large as input.chkbox

Unchecking Took 4031ms
Checking Took 4062ms
Unchecking Took 4031ms
Checking Took 4062ms

Javascript for loop is by far the worst:

Checking Took 149797ms

150 ! . jQuery. , . , , ...

:

[ID = 'chkbox']

Unchecking Took 3031ms
Checking Took 3016ms

, :

[ID = 'chkbox'] [ = '']

Unchecking Took 3375ms
Checking Took 3344ms

, , , . !

:

#myTable tr [id ^ = 'row'] input [id ^ = 'chkbox'] [type = 'checkbox']

Checking Took 10422ms

, , . !: P

4/14:

- : , IE7, ! , , :

"input.chkbox", "tr"

Checking Took 8546ms

"input.chkbox", "tr.myRow"

Checking Took 8875ms

"input.chkbox", "# form1"

Unchecking Took 3032ms
Checking Took 3000ms

"input.chkbox", "#myTable"

Unchecking Took 2906ms
Checking Took 2875ms

( ): input [name = chkbox]

Unchecking Took 2469ms
Checking Took 2453ms

"input [name = chkbox]" , "tr.myRow"

Checking Took 9547ms

"input [name = chkbox]" , "# form1"

Unchecking Took 3140ms
Checking Took 3141ms

"input [name = chkbox]" , "#myTable"

Unchecking Took 2985ms
Checking Took 2969ms

2 4/14

, , , , http://beardscratchers.com/journal/jquery-its-all-about-context. , , , - darn.

"input [name = chkbox]" , $( "# form1" )

Unchecking Took 3078ms
Checking Took 3000ms
Unchecking Took 3078ms
Checking Took 3016ms

"input [name = chkbox]" , $( "# myTable" )

Unchecking Took 2938ms
Checking Took 2906ms
Unchecking Took 2938ms
Checking Took 2921ms

3 4/14

, , , :

:

Unchecking Took 8328ms
Checking Took 6250ms

:

Unchecking Took 5016ms
Checking Took 5000ms

- > ?!?! [ = ]

Unchecking Took 4969ms
Checking Took 4938ms

, - , , , . ( IE7): checkbox type = ? , 62 . , ? , ?

+8

, [] , , ?

, , DOM . , , " " ( , unselect/select).

+5

, , . . . FireFox, Google Chrome. IE JavaScript.

, jquery.

, . , , - . "". , , , , . , "", .

+2

jQuery context, , ? , ASP.NET , , ?

,

$("input[id^='chkbox']")


$("input[id^='chkbox']", "#myFormID")

BeardScratchers

EDIT:

After your updates, it seems that 2.45-6 seconds may be the fastest that you can achieve, given your circumstances.

Just for completeness, have you tried the following selectors?

$(':checkbox')
$('input[type=checkbox]')
+1
source

More articles:


All Articles