jQuery get checked checkboxes from name[]

Question

I have checkboxes like so:

<ul id="searchFilter">
    <li><input type="checkbox" name="price[]" class="cb_price" value="1"> $200,000 to $299,999</li>
    <li><input type="checkbox" name="price[]" class="cb_price" value="3"> $300,000 to $399,999</li>
    <li><input type="checkbox" name="price[]" class="cb_price" value="5"> $400,000 to $499,999</li>
    <li><input type="checkbox" name="price[]" class="cb_price" value="8"> $500,000+</li>
</ul>

How would I alert the price[] to see what is checked? I am very new at jquery :(

When do you want to alert..? Do you want to alert the name `price[]` or the actual price which is displayed? — T J, Jul 15 '14 at 19:10
if i select values 1 and 5, I am looking for an alert with 1,5 — user3723240, Jul 15 '14 at 19:11
So one alert after checking one , and another with both values after clicking both..? — T J, Jul 15 '14 at 19:12
`$('input[name="price[]"]').filter(":checked").map(function () { return this.value; }).get());` - http://jsfiddle.net/H7mCt/ — Ian, Jul 15 '14 at 19:12
@Ian please post answers as answer so the question won't remain unanswerd forever... — T J, Jul 15 '14 at 19:14

Ian · Accepted Answer · 2014-07-15T19:26:57.347

First, you can get the checkboxes by name:

var checkboxes = $('input[name="price[]"]');

Then, to get the values of the checked ones, you can filter by the pseudo selector :checked, and then collect their values:

checkboxes.filter(":checked").map(function () {
    return this.value;
}).get()

DEMO: http://jsfiddle.net/Fn9WV/

References:

jQuery().filter() - http://api.jquery.com/filter/
jQuery().map() - http://api.jquery.com/map/

score 2 · Answer 2 · answered Jul 15 '14 at 19:15

2

You can try this:-

var selected = [];
$('[name="price[]"]:checked').each(function(checkbox) {
selected.push(checkbox);
});

answered Jul 15 '14 at 19:15

Indranil Mondal

2,799
3
25
40

gregn3 · Answer 3 · 2014-07-15T20:18:23.157

Use the selector $('#searchFilter [name="price[]"]:checked') with jquery to find all the checked checkboxes with the name "price[]" in this form. This will be zero or more elements, depending on how many are checked.

Then use the jquery each() function to iterate over the found checkbox elements, and collect their values into the "checked" array. In the callback function to each(), the this points to the current element's dom node, wrap it with $(this) to create a jquery object and use .val() to retrieve the value from it.

Finally merge the items into a string, to form a comma separated list using the join() function of the "checked" array. It can be an empty string if none of the checkboxes are checked.

var checked = [];

$('#searchFilter [name="price[]"]:checked').each (function (i, e)
{
    checked.push ($(this).val ());
});

alert (checked.join (','));

Notice that other answers used this.value to retrieve the "value" attribute of the checkbox instead of using $(this).val(), which is the jquery way to do it and less error prone.

I'm currently reviewing this answer, as it was flagged for quality assessment by a moderator-level user. Thanks for your answer, your time is appreciated. However, this is considered a low quality answer because it's lacking text explaining how and why it solves the OP's problem. I won't flag this for deletion this time, because it may solve the problem and we wouldn't want to loose it, but it would be good if you could flesh the answer out a little with a few lines explaining how it helps. Thanks. — Software Engineer, Jul 15 '14 at 19:51

ltalhouarne · Answer 4 · 2014-07-15T19:13:16.680

-1

Try the following:

var alert="";
$('input[type=checkbox]').each(function () {
  if($(this).attr("checked") == 1)) alert += $(this).val();
  if(alert.length > 1) alert(alert);
});

edited Jul 15 '14 at 19:13

answered Jul 15 '14 at 19:08

ltalhouarne

4,586
2
22
31

This will work only for a single checkbox. It won't alert the values of the other checkboxes that might be selected too. – rhino Jul 15 '14 at 19:11
this only gets me 1 value, I am looking for a list of values, if i select 1 and 5, I am looking for an alert with 1,5 – user3723240 Jul 15 '14 at 19:11
1

That's gonna send separate alerts. Need to concat vals in loop and alert after. – StaticVoid Jul 15 '14 at 19:14

score -1 · Answer 5 · edited May 23 '17 at 11:50

-1

One way would be to set each checkbox to a specific id. Then you could use $('#' + id).is(":checked") to see if the checkbox is checked. If the checkbox is checked, you could get the range and store it in a variable. You can then return that variable.

Check this page if you need some help with the checkbox.

edited May 23 '17 at 11:50

Community

1
1

answered Jul 15 '14 at 19:16

user3798384

73
10

Rob · Answer 6 · 2014-07-15T19:31:09.140

//get val on click    
$(document).on('click', ".cb_price", function () {
            if ($(this).is(':checked')) {
                 alert($(this).val());
            }
        });

//a button to call the function
$(document).on('click', ".some_button", function () {
            function getitems();
        });

function getitems(){
$(".cb_price").each(function () {
                //
                var $chk = $(this);
                if ($chk.is(':checked')) {
                    checkboxes = checkboxes + $(this).val() + ","
                }    
            });
alert(checkboxes);
}

jQuery get checked checkboxes from name[]

6 Answers6