jQuery - Getting the checked values of any set of checkboxes

Question

I would like to determine the most efficient way (using jquery, or dom) to get the value of a set of checkboxes if you have one of them.

This should be generic when the input checkbox is part of a form. However, is this x-browser safe, how to do this more efficiently, and what if the checkbox is not part of a form?

function (domCheckboxElm) {
    var result = $.map($(domCheckboxElm.form.elements[domCheckboxElm.name]).filter(":checked"), function(e) {
        return $(e).val();
    });
    return result;
}

Edit:

As a side note, performance is very important here. This algorithm is needed for forms with a few input elements and for forms with thousands. And many of my users have extremely old computers ('02, '04, '05).

Sounds like this: http://stackoverflow.com/questions/590018/getting-all-selected-checkboxes-in-an-array — epascarello, Aug 24 '10 at 16:26
@Vivin: But I did not get answers I was looking for. I mean an answer of "not possible because ..." would have been acceptable, I instead went with a hacky-ish solution that solved my immediate needs. — Dmitriy Likhten, Aug 24 '10 at 17:11
@epascarello: I agree that `$("input:checkbox[name=type]:checked")` will solve the problem, but it is quite horrible performance! Has to look through every (input) element of the dom and find the element with the name that I specified. Is the performance really acceptable for large pages (where I need to use this)? — Dmitriy Likhten, Aug 24 '10 at 17:23
@Dimitriy Understood. But you can also post your own solution and accept it. :) — Vivin Paliath, Aug 24 '10 at 20:02
@Vivin: I am not happy with my solution :) I was hoping to get some more input. An example is: http://stackoverflow.com/questions/3398998/how-to-create-a-scrollable-table-in-google-chrome, I really want to know if there is a CSS solution, the answer provided does not help me. If no solution I am looking for is possible I'd like to know that too, but I don't want to just put down that its impossible when I don't know that for a fact. — Dmitriy Likhten, Aug 24 '10 at 20:54

score 1 · Answer 1 · edited May 23 '17 at 10:32

First of all: Select values of checkbox group with jQuery

Performance really shouldn't be an issue, unless you've got thousands of checkboxes to go through in one pass. Your best bet would be to encapsulate the checkboxes within a div or other parent DOM object, which can then be used within jQuery to constrain its DOM search:

HTML

<div id="checkboxDiv">
  <input type="checkbox" name="sample" value="isAPerson"  />       
  <input type="checkbox" name="sample" value="isADog"  />
  <input type="checkbox" name="sample" value="isACat"  />
</div>

jQuery

var checkBoxArray=[];
$("#checkboxDiv input:checkbox").each(function(){
    checkBoxArray.push([$(this).attr("value"),$(this).attr("checked")]);
});

Here's the practical example (assuming you're already including jQuery):

<script type="text/javascript">

 $("#checkboxDiv input:checkbox").click(function(){
    var checkBoxArray=[];
    $("#checkboxDiv input:checkbox").each(function(){
        checkBoxArray.push([$(this).attr("value"),$(this).attr("checked")]);
    });
     $("#disp").empty().append(function(){
            var outputStr="";
            for (a in checkBoxArray){
                outputStr+=checkBoxArray[a][0]+": "+checkBoxArray[a][1]+"<br/>";
            }
            return outputStr;
         });
    });
</script>

Then, in the body:

<div id="checkboxDiv">
  <input type="checkbox" name="sample" value="isAPerson"  />       
  <input type="checkbox" name="sample" value="isADog"  />
  <input type="checkbox" name="sample" value="isACat"  />
</div>

<div id="disp"></div>

Let me re-state the problem. I have a form with thousands of checkboxes. I don't know ahead of time in my function what is the parent container (or how high up to go) to get the common parent of the checkboxes, to optimize the lookup. The solution I provided in the question appears to perform well when the checkboxes are part of a form, but not when they are outside of one, since I need a different algorithm (other than the generic `input:checkbox[name=...]`) Maybe that is enough, the generic for something not the child of a form, the form for one that is. — Dmitriy Likhten, Aug 24 '10 at 20:52
Well, then I guess you answered your own question...although, rather than trying to write some super fast algorithm to go through every single checkbox, I still think you'd be better served trying to find a way to LOCATE the parent element. jQuery has an extremely robust event handling system, and via the event.target property, you can easily find out what element is wrapped around a specific set of checkboxes. If you are dealing with thousands of them, I'd think you'd be spending a lot of energy on organizing them efficiently as well as iterating through them. — Trafalmadorian, Aug 25 '10 at 00:16

score 0 · Accepted Answer · answered Aug 31 '10 at 19:37

0

I think the solution I would have to go with is the one I proposed with a fallback on the generic "input:checkbox[name=" + elm.attr("name") + "]" if the element is not part of a form.

answered Aug 31 '10 at 19:37

Dmitriy Likhten

5,076
7
36
47

jQuery - Getting the checked values of any set of checkboxes

2 Answers2