CODEWITHSUNDEEP
javascriptjquery
user3723240
user3723240

Reputation: 393

jQuery get checked checkboxes from name[]

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 :(

Upvotes: 4

Views: 15870

Answers (6)

gregn3
gregn3

Reputation: 1774

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.

Upvotes: 0

Rob
Rob

Reputation: 1216

//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);
}

Upvotes: -1

Ian
Ian

Reputation: 50905

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:

Upvotes: 13

user3798384
user3798384

Reputation: 73

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.

Upvotes: -1

Indranil Mondal
Indranil Mondal

Reputation: 2857

You can try this:-

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

Upvotes: 2

ltalhouarne
ltalhouarne

Reputation: 4636

Try the following:

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

Upvotes: -1

Related Questions