Checking to see if at least one checkbox is checked?

[galvin]

I have a form with several checkbox inputs that submits to a PHP page via Post and the selected checkboxes are posted to an array (each input has a name of "checkedboxes[]" so that an array is created in $_POST['checkedboxes']);

 

However, before it submits, I want to use javascript to make sure the user checked at least one checked. I know how to check it using PHP, but again, I want to do it without leaving the page, so I want to use javascript.

 

Can anyone help?    I've googled and it seems I will have to use something like onclick='return validate();' or maybe onsubmit='return validate();' but I am having trouble obviously, figuring out how to actually check in the validate function (if that is in fact the right way to do it).

 

Here's the example code.  Again, just want to make sure the user checks at least ONE of those 4 boxes...

 

<form id="form" method="post" action="nextstep.php">
<input type="checkbox" name="checkedboxes[]" value="1">
<input type="checkbox" name="checkedboxes[]" value="2">
<input type="checkbox" name="checkedboxes[]" value="3">
<input type="checkbox" name="checkedboxes[]" value="4">
<input type='submit' name='submit' value='Submit' />
</form>

[.josh]

does your page have a framework like jQuery on it?

[galvin]

yes, I do have JQuery on the page

[.josh]

<script type='text/javascript'>

$(document).ready(function() {

  $('#form').submit(function() {
     
    if ($(this).find('input[name="checkedboxes[]"]:checked').length == 0) {
      alert('make at least one selection!');
      return false;
    }

  });

});		

</script>

[galvin]

Wow, gotta love JQuery.  Thank you!!!

[galvin]

Follow up...  Using my same example, is there a way using JQuery to trigger an event when any one of my checkboxes is checked? 

 

I found this code below online, but this is checking one specific checkbox.  I might have  A LOT of checkboxes, so I'd rather not have to have a click function for every one of my individual checkboxes,  looking to see if one is checked...

 

$('#myCheckBox').click (function ()
{
var thisCheck = $(this);
if (thischeck.is (':checked'))
{
// Do stuff
}
});

 

I feel like I should be able to use a similar version of .josh's reply earlier, i.e something like....

 

  if ($(this).find('input[name="checkedboxes[]"]:checked').length == 1) {
      alert('someone checked a box!');
     }

 

But I can't figure out how I would run that code WHEN someone checks any one of my potentially many checkboxes.  Any ideas?

[Christian F.]

For this you'd want to bind () a function to the checkboxes, and have that function check whether or not it's marked (or whatever else you want to do).

[Mahngiel]

For this you'd want to bind () a function to the checkboxes, and have that function check whether or not it's marked (or whatever else you want to do).

 

Couple that with a mapping, and you'll be good to go. http://jsfiddle.net/nADPb/1/

[.josh]

alternatively, just use the same selectors and attach a .click event to it...

 

  $('#form input[name="checkedboxes[]"]').click(function() {
    alert($(this).val());
  });

 

[galvin]

Thanks all!