how to check if checkboxes are checked?

[commun1]

Heya,

well, I have a form that looks like this:

<form name="test" action="index.php" method="post" onsubmit="checkers(); return false;">
<input type="checkbox" name="checker[]" value="1">
<input type="checkbox" name="checker[]" value="2">
<input type="checkbox" name="checker[]" value="3">
<input type="checkbox" name="checker[]" value="4">
<input type="checkbox" name="checker[]" value="5">
<input type="submit">
</form>

how can I check if there's any of those checkboxes checked using javascript?

document.test.checker[].checked seems to be wrong because of the array...

thanks in advance

 

[LTeeple]

Hi, commun1,

First of all, I recently learned myself that "checker[]" is an invalid name. Just name them all "checker".

Then do this in your checkers() function:

function checkers(){
  var checkers = "";
  obj = document.form.elements['checker'];
  for (i = 0; i < obj.length; i++) {
    if (obj[i].checked) {
	  checkers = checkers + obj[i].value + ",";
    }
  }
  if (checkers == "") {
    // no checker is selected...
  }
}

Cheers!
Laura

 

[commun1]

Hello Laura,

well actually if you want to get more values from a field that has the same name you'd write checker[].

cause if you name them only checker you won't get all the single values if more than one checkbox is clicked...

in other words:

<form name="test" action="index.php" method="post" onsubmit="checkers(); return false;">
<input type="checkbox" name="checker[]" value="1" checked>
<input type="checkbox" name="checker[]" value="2">
<input type="checkbox" name="checker[]" value="3" checked>
<input type="checkbox" name="checker[]" value="4">
<input type="checkbox" name="checker[]" value="5" checked>
<input type="submit">
</form>

gives me

[checker] ==> 1
[checker] ==> 3
[checker] ==> 5

but

<form name="test" action="index.php" method="post" onsubmit="checkers(); return false;">
<input type="checkbox" name="checker" value="1" checked>
<input type="checkbox" name="checker" value="2">
<input type="checkbox" name="checker" value="3" checked>
<input type="checkbox" name="checker" value="4">
<input type="checkbox" name="checker" value="5" checked>
<input type="submit">
</form>

gives me only
[checker] ==> 5

thanks for the function though it doesn't help in my case.

 

[tsuji]

>obj = document.form.elements['checker'];
obj = document.[red]test[/red].elements['checker[red][][/red]'];

 

[LTeeple]

Hello Laura,

well actually if you want to get more values from a field that has the same name you'd write checker[].

cause if you name them only checker you won't get all the single values if more than one checkbox is clicked...

That's weird... It works for me. I use a form with 7 different choices, where more than one box can be checked - otherwise a radio button would be appropriate.

HTML Code

<input type="checkbox" name="choice" value="Choice 1">Choice 1<br>
<input type="checkbox" name="choice" value="Choice 2">Choice 2<br>
<input type="checkbox" name="choice" value="Choice 3">Choice 3<br>
<input type="checkbox" name="choice" value="Choice 4">Choice 4<br>
<input type="checkbox" name="choice" value="Choice 5">Choice 5<br>
<input type="checkbox" name="choice" value="Choice 6">Choice 6<br>
<input type="checkbox" name="choice" value="Choice 7">Choice 7<br>
<input type="hidden" name="choices" value="">

Javascript Code

function CheckForm(aForm){
  var choices = "";
  obj = aForm.elements['choice'];
  for (i = 0; i < obj.length; i++) {
    if (obj[i].checked) {
	  choices = choices + obj[i].value + ",";
    }
  }
  if (choice == "") {
    validHandle = false;
    errorString += "\nChoice not chosen. \r";
  }
  else {
	aForm.elements['choices'].value = choices;
  }
  if (validHandle == false) { 
    errorString += "\r";              
    alert(errorString+'\nPlease make changes and submit the form again.');        
  } 
  return (validHandle == true)
}

You see, I concatenate all choices into a variable called 'choices' - separated by commas - then when the function is over, I assign the values collected from all the checkboxes to a hidden field called 'choices' - which is successfully saved. At any gived time anyone can select any choice, or a combination thereof, and the function successfully retains all those variables - without having a non-HTML-compliant page.


Cheers!
Laura

 

[commun1]

yupp, I had a typo in my javascript, that's the reason why it didn't work...

thank you for your help =)

 

[adam0101]

Laura, this syntax (although non-HTML compliant) is neccessary when retrieving values on the server-side when using PHP, at least with multi-select boxes. commun1, if this is the case, you should use tsuji's solution.

Adam

 

[tsuji]

commun1, I think Laura's checkers() should work if the line is amended as what I posted. Only the specific renderment you may or may not like. - tsuji

 

[LTeeple]

adam0101,

I use PHP to retrieve the values from a database, and have no difficulties with the syntax I provided...

I have an add form, where the user can select one or multiple choices, I then validate to ensure at least one choice is selected. I then concatenate all choices to one string, separated by a comma. Using PHP, I then drop the trailing comma, and insert into a text field in a mysql database.

for my edit form, using PHP/Javascript, I draw the selected values from the database, and check the fields that were selected without any errors.




Cheers!
Laura

 

[adam0101]

Yes, that will work if you're sure your user will have JavaScript enabled. But how can you be sure? If you leave the square brackets on, the values will be submitted directly into an array on the server-side.

Adam

 

[LTeeple]

adam101 - good point.

My forms are intended for an Intranet, where I know all users must have javascript enabled.

Thank you for pointing that out.


Cheers!
Laura