PHP Tutorials

Get Multiple Values of Selected Checkboxes in PHP 8

In this tutorial, our primary goal is to get values of multiple checked or selected checkboxes and implement checkboxes validation in PHP 8.

A checkbox is also known as a tick box or a selection box. A checkbox is a tiny user interface component that allows users to select more than one option from a given options list.

We will create a small fruits list using HTML 5 and display that checkboxes list to the users to select more than one option. We will get the multiple values of selected checkboxes with PHP 8 and learn to implement the multiple checkbox validation in PHP.

If you are getting started in PHP, then do check out our detailed articles on Building CRUD REST API in PHP and MySQL and Getting Multiple Select Option Values in PHP

Create Form with Multiple Checkboxes

Create a form using HTML form element, define input field with the type="checkbox" value. The checkArr[] is an array object which is defined in the name-value, which is used to communicate with the PHP.

<form action="" method="post">
  <label>
    Apple
    <input type="checkbox" name="checkArr[]" value="Apple">
  </label>
  <label>
    Banana
    <input type="checkbox" name="checkArr[]" value="Banana">
  </label>
  <label>
    Coconut
    <input type="checkbox" name="checkArr[]" value="Coconut">
  </label>
  <label>
    Blueberry
    <input type="checkbox" name="checkArr[]" value="Blueberry">
  </label>
  <input type="submit" name="submit" value="Choose options" />
</form>

Read Multiple Values from Selected Checkboxes

The isset($_POST[‘submit’]) method checks whether the submit value is declared or not.

In the isset function, we are employing another validation and making sure whether the checkboxes’ values are set or not using the empty() function.

Use the foreach() loop to iterate over every selected value of checkboxes and print on the user screen.

<?php
  if(isset($_POST['submit'])){
      if(!empty($_POST['checkArr'])){
      foreach($_POST['checkArr'] as $checked){
        echo $checked."</br>";
      }
    }
  }
?>

Checkboxes Validation in PHP

To add the validation in checkboxes, place the following code in your PHP template.

<?php
  if(isset($_POST['submit'])){
      if(!empty($_POST['checkArr'])){
        foreach($_POST['checkArr'] as $checked){
          echo $checked . '<br>';
        }
      } else {
        echo '<div class="error">Checkbox is not selected!</div>';
      }
  }
?>

Checkboxes with Custom Style

Add the span tag below the input field to add the custom styling in checkboxes.

<form action="" method="post">
  <label>
    Apple
    <input type="checkbox" name="checkArr[]" value="Apple">
    <span></span>
  </label>
  <label>
    Banana
    <input type="checkbox" name="checkArr[]" value="Banana">
    <span></span>
  </label>
  <label>
    Coconut
    <input type="checkbox" name="checkArr[]" value="Coconut">
    <span></span>
  </label>
  <label>
    Blueberry
    <input type="checkbox" name="checkArr[]" value="Blueberry">
    <span></span>
  </label>
  <input type="submit" name="submit" value="Choose options" />
</form>

Style checkbox with only HTML and CSS.

label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 25px;
}

/* Hide the browser's default checkbox */
label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
span {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #cccccc;
}

label:hover input~span {
  background-color: #cccccc;
}

label input:checked~span {
  background-color: #1A33FF;
}

span:after {
  content: "";
  position: absolute;
  display: none;
}

label input:checked~span:after {
  display: block;
}

label span:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Final PHP 8 Checkboxes Code Example

Here is the complete code example for checkboxes in PHP.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>PHP - Get Multiple Checkbox Value DEMO</title>
</head>

<body>

  <div class="container mt-5">
    <form action="" method="post" class="mb-3">
      <label>
        Apple
        <input type="checkbox" name="checkArr[]" value="Apple">
        <span></span>
      </label>
      <label>
        Banana
        <input type="checkbox" name="checkArr[]" value="Banana">
        <span></span>
      </label>
      <label>
        Coconut
        <input type="checkbox" name="checkArr[]" value="Coconut">
        <span></span>
      </label>
      <label>
        Blueberry
        <input type="checkbox" name="checkArr[]" value="Blueberry">
        <span></span>
      </label>
      <input type="submit" name="submit" value="Choose options" />
    </form>

    <?php
      if(isset($_POST['submit'])){
          if(!empty($_POST['checkArr'])){
            foreach($_POST['checkArr'] as $checked){
              echo $checked . '<br>';
            }
          } else {
            echo '<div class="error">Checkbox is not selected!</div>';
          }
      }
    ?>
  </div>

</body>
</html>

Conclusion

In this tutorial we learned how to work with checkboxes. We have seen how to get multiple values and implement validation in PHP.

Digamber

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.

Recent Posts

React Display Validation Error Messages with Hook Form Tutorial

As a React developer, you must know how to implement validation in form, and a…

2 days ago

React Hook Form 7 Required Checkbox Validation Tutorial

Creating checkboxes in React is not so difficult, especially when you are using React Hook…

5 days ago

React Hook Form 7 Custom Radio Buttons Tutorial

Learning React is not complicated; instead, it's easy, but only when you have the right…

1 week ago

React Bootstrap Custom Dropdown List with Fetch API Tutorial

Dropdown is a valuable and prominent module, which is often used to select one option…

2 weeks ago

React Hook Form Reset / Clear Form Values and Errors Tutorial

React form reset tutorial; Forms are handy provides the best possible way to get information…

2 weeks ago

React Show Loading Spinner on Submit Click Tutorial

You click on the submit button, form is processed, but nothing is being shown to…

2 weeks ago