How to check multiple checkboxes checked using jquery?

Question

i am new to the jquery, it is quite interesting, but i am having a little problem, i am populating multiple checkboxes from database using foreach loop like this,

<? foreach($cities as $city) { ?>
    <input type="checkbox" name="city[]" value="<?=$city->id?>" id="city[]" />
<? } ?>

i want to restrict user to check atleast one checkbox, i know how to do this with only one checkbox, but got confused with this kind of array in jquery, any help will be greatly appreciated! Many thanks in advance!

Shouldn't you use radio buttons if you only want the user to select one? — Willem Ellis, Apr 23 '13 at 05:38
@Willem Ellis He needs atleast once checkbox to be checked. Can have multipe also. — kiranvj, Apr 23 '13 at 05:41
Just a note, its better to use PHP delimiter than using just ?> — kiranvj, Apr 23 '13 at 05:51
@Willem Ellis, i need checkboxes, thank you all great helpers! — Irfan Ahmed, Apr 23 '13 at 06:16

Ian · Accepted Answer · 2014-08-05T18:47:41.573

To find how many checkboxes are checked, you can use something like:

var checkedNum = $('input[name="city[]"]:checked').length;
if (!checkedNum) {
    // User didn't check any checkboxes
}

Since you're providing the same name attribute to all the checkboxes (from your PHP loop), you can use the selector input[name="city[]"] to target and find them all. But to find out how many specifically are checked, you can add the :checked selector. An alternative to this is using $('input[name="city[]"]').filter(":checked").

Finally, !checkedNum will only pass if checkedNum is 0, since 0 is falsey. Any other number is truthy, and wouldn't satisfy the condition !checkedNum.

References:

jQuery attribute equals selector: http://api.jquery.com/attribute-equals-selector/
:checked selector: http://api.jquery.com/checked-selector/
jQuery .length property: http://api.jquery.com/length/

@lan Can't forget your help, you are talented sir! – Irfan Ahmed Apr 23 '13 at 06:12 — Irfan Ahmed, Apr 23 '13 at 06:12

score 2 · Answer 2 · answered Apr 23 '13 at 05:45

If you want at least one checkbox checked, you can use this

var somethingChecked = false;
$("input[type=checkbox]").each(function() {
  if(this).is(':checked')) {
    somethingChecked = true;
  }
});
if(!somethingChecked) {
  alert("You haven't checked anything yet");
}

What this does is initialize a variable to false. Then the script loops through all inputs of type checkbox. If the item is checked, set the variable to true. Finally, check if the variable is still false. If it is, then show an error.

Sandeep Sherpur · Answer 3 · 2017-09-29T04:53:01.883

This code work well for me,here i convert array to string with ~

    <input type="checkbox" value="created" name="today_check"><strong>Created</strong>
    <input type="checkbox" value="modified" name="today_check><strong>Modified</strong>
 <a class="get_tody_btn">Submit</a>

<script type="text/javascript">
    $('.get_tody_btn').click(function(){
        var vals = "";
        $.each($("input[name='today_check']:checked"), function(){  
            vals += "~"+$(this).val();  
        });
        if (vals){
            vals = vals.substring(1);
        }else{
            alert('Please choose atleast one value.');
        }


    });
</script>

score 0 · Answer 4 · answered Apr 23 '13 at 05:44

Assuming you have #my_form as the ID of your form, you could do

$("#my_form input[type=checkbox]:checked"). // ... do something

to select and do something with the checked checkboxes. You can also do

$("#my_form input[type=checkbox]").each(function(idx, elem) {
   var is_checked = $(this).prop("checked");
   // Do something with is_checked
});

to iterate through all the checkboxes and check whether they are checked or not.

score 0 · Answer 5 · answered Apr 23 '13 at 05:49

First of all id of the checkboxes should be unique.

Do like this

<? 
$checkBoxCount = 0;
foreach($cities as $city) { ?>
    <input type="checkbox" name="city[]" value="<?=$city->id?>" id="chkbox-<?=$checkBoxCount?>" />
<? } ?>

Now in jQuery check like this to get all the checkboxes thats checked.

var checkCount = $("input[name='city[]']:checked").length;

if(checkCount == 0)
{
   alert("Atleast one checkbox should be checked.");
}

How to check multiple checkboxes checked using jquery?

5 Answers5

Linked