Home > HTML/CSS, PHP/mySQL > HTML Multi checkbox set – the correct way to group checkboxes

HTML Multi checkbox set – the correct way to group checkboxes

February 15th, 2012

I was setting up an HTML form today and I wanted to group some options together in a multi checkbox set, allowing a user to select multiple options in a category. I usually just give each checkbox a unique name and parse all of the individual values in PHP, but this has always struck me as an ugly way to handle this use case.

As I was looking up the syntax for an HTML checkbox, I found a lot of info that said I could simply name all of the checkboxes the same and it would group all of the values together like this:

<input type="checkbox" name="chk_group" value="value1" />Value 1<br />
<input type="checkbox" name="chk_group" value="value2" />Value 2<br />
<input type="checkbox" name="chk_group" value="value3" />Value 3<br />

But this doesn’t work. When you POST the values to PHP, you only receive the last item selected in the group. The annoying thing is that a lot of the examples online show this same syntax even though it’s clearly wrong. After digging a little deeper, I found this forum post with the correct syntax. Adding square braces to the checkbox name creates an array of the selected values in the group:

<input type="checkbox" name="chk_group[]" value="value1" />Value 1<br />
<input type="checkbox" name="chk_group[]" value="value2" />Value 2<br />
<input type="checkbox" name="chk_group[]" value="value3" />Value 3<br />

This can be retrieved in PHP with a simple loop:

<?php
if (isset($_POST['chk_group'])) {
    $optionArray = $_POST['chk_group'];
    for ($i=0; $i<count($optionArray); $i++) {
        echo $optionArray[$i]."<br />";
    }
}
?>

Simple! I thought I should post this correct solution in the hopes that it might help someone else wade through all of the wrong information out there.

Be Sociable, Share!

  1. Justin
    June 11th, 2012 at 10:41 | #1

    Very helpful. Thanks!

  2. June 12th, 2012 at 08:48 | #2

    Why not use foreach($optionArray as $option) instead of for($i=0; $<count(…..) !?

  3. admin
    June 12th, 2012 at 10:00 | #3

    Using a foreach is a great way to do it, but is a little harder for php beginners to understand. Thanks.

  4. June 19th, 2012 at 06:55 | #4

    Why not just use implode()?

    echo implode(”, $_POST[‘chk_group’]);

  5. June 19th, 2012 at 06:56 | #5

    should’ve read :

    echo implode(”, $_POST[‘chk_group’]);

    html got filtered out!

  6. August 19th, 2012 at 04:47 | #6

    Thank you, just what I was looking for…

  7. adam
    September 13th, 2012 at 14:44 | #7

    Seriously, thank you for this. Had the same issue with only the last item coming over and was about to pull out my hair.

  8. Sachin Viduranga
    December 22nd, 2012 at 10:44 | #8

    Hey Man , You Saved My Time! , Thx Bro

  9. Derya S.
    January 6th, 2013 at 14:26 | #9

    Thank you very much :) Mujjxxx

  10. kitty
    January 18th, 2013 at 11:14 | #10

    muy buena solucion pero no puedo enviar como matriz trabajo con jquery easyui y MVC

  11. Jonny
    January 22nd, 2013 at 17:22 | #11

    my best suggestion to you, is stop using admin as your comment name. Who is Admin, is it Mark, John, or how about Ravi?

  12. Andy
    January 23rd, 2013 at 21:05 | #12

    Only an uber troll would take time out of their day to give me a hard time about my username on this blog. Well played, my friend. I changed it for you.

  13. Paul
    February 3rd, 2013 at 17:04 | #13

    I Love Your Bunny!

  14. February 13th, 2013 at 08:17 | #14

    Nice! It works perfectly.
    Thanks a lot.

  15. ant
    February 25th, 2013 at 04:39 | #15

    sweet find, andy.
    my form processing scripts are a lot cleaner thanks to this 😀

  16. David
    March 3rd, 2013 at 06:57 | #16

    Hi,

    Great little bit of kit, how would i put the result in this?
    $message is sent through email

    $optionArray = $_POST[‘chk_group’];
    for ($i=0; $i<count($optionArray); $i++) {
    echo $optionArray[$i];
    }

    $message = "\n\n Name: $name \n\n Email: $email_address \n\n About Me: \n\n $message \n\n \n\n Here is $name's CV: $file_name";

  17. Andres Padilla
    March 21st, 2013 at 17:24 | #17

    Muchas gracias por tu ayuda

  18. Ruben
    March 31st, 2013 at 16:14 | #18

    Muuuchas Gracias.
    Thanks!

  19. May 9th, 2013 at 20:08 | #19

    This saved me so much time!

  20. Feilian
    May 29th, 2013 at 06:25 | #20

    Oh my god, thank you heaps!
    Had been trying to get my checkbox to work for a few days.
    Thank you so much for posting these solutions!!!!!1

  21. Govardhan
    May 30th, 2013 at 20:38 | #21

    great job!!

  22. abhishek
    August 30th, 2013 at 08:02 | #22

    how to retreive values in javascript?
    ty

  23. October 3rd, 2013 at 13:23 | #23

    Thanks! W3C documentation fails on listing this. You saved me a lot of trouble. :)

  24. October 5th, 2013 at 12:34 | #24

    Thanks……. Nice! It works perfectly.
    Thanks a lot.

  25. Dhaval
    October 8th, 2013 at 06:10 | #25

    Good.. it makes so easy to retrieve group values

  26. October 15th, 2013 at 02:01 | #26

    Nice and very easy to understand example, most ppl forgot to explain how to retrieve the values in PHP. Thank you!

  27. October 18th, 2013 at 02:15 | #27

    Very useful. I just wonder … now that they all have identical names, how to address all these checkboxes in JavaScript if I want to toggle them on/off all at once?

  28. JeroenMe
    January 8th, 2014 at 05:34 | #28

    @Anonymous

    You could just give them the same class and loop them using javascript and toggle them one by one.

  29. OMen
    February 1st, 2014 at 13:02 | #29

    Thank you.. very useful!

  30. Mike
    February 3rd, 2014 at 11:19 | #30

    @abhishek
    var jsvar =

    Also, I googled this thinking there might need to be a special way to do this, and it turns out there isn’t anything special to do, just like you premise at the beginning of this article. However, for me there was no issue as you describe with getting the values from checkboxes with the same names. Here’s the code I got from elsewhere to put the url flags into an array:

    $query = explode(‘&’, $_SERVER[‘QUERY_STRING’]);
    $params = array();
    foreach( $query as $param )
    {
    list($name, $value) = explode(‘=’, $param);
    $params[urldecode($name)][] = urldecode($value);
    }

  31. Artur
    February 18th, 2014 at 06:18 | #31

    Super and very easy to use.

  32. Rolando
    March 18th, 2014 at 13:11 | #32

    Very helpful, thanks

  33. Allison
    April 29th, 2014 at 14:22 | #33

    Yes! I was looking at examples and, you’re right, they’re all wrong: checking multiple boxes with the same name just overwrites them in the post parameters. Thought I was losing my mind. Thank you for writing this!

  34. Peter
    May 8th, 2014 at 04:06 | #34

    Just wanted to drop in a quick “thanks” from a novice PHP programmer. I’ve been banging my head against the wall for quite some time on this and FINALLY found the info I needed here. Short, simple and to the point. Thanks again!

  35. Adrian
    May 8th, 2014 at 21:18 | #35

    Thanks – you just saved my day. Can’t believe I didnt notice the missing [] in the name attribute !

  36. August 9th, 2014 at 04:47 | #36

    Just the code i need. explode() function also worked perfectly. Thanks men.

  37. August 19th, 2014 at 16:55 | #37

    Googled “html form group checkbox” and I am not disappointed! Thanks man

  38. linquant
    January 25th, 2016 at 14:52 | #38

    Thanks

  1. No trackbacks yet.

Top