Select Atleast One Checkbox Validation In JavaScript

In this tutorial we will show you the solution of select atleast one checkbox validation in JavaScript, here validation used is that at least one checkbox must be selected from the given set of checkboxes.

So, let us understand this whole process with the help of the example given below.

Step By Step Guide On Select Atleast One Checkbox Validation In JavaScript :-

There are many ways with help of which we are able to apply validations on checkboxes using JavaScript.

Here, in the below example in which we are going to display you a message when any checkbox is not selected.

You are able to select as many as checkboxes you want, but you are not allowed to redirect if not at least one checkbox is selected.

So, let us see the codes given below for a better understanding.

<form action="/redirection_page.html" onsubmit="return checkboxValidation(this);">
      <p><input type="checkbox" name="first_checkbox" value="one"> CheckBox One...</p>
      <p><input type="checkbox" name="second_checkbox" value="two"> Checkbox Two...</p>
      <p><input type="checkbox" name="three_checkbox" value="three"> Checkbox three...</p>
      <p><input type="submit" value="Submit!"></p>
  </form>
  <script type="text/javascript">
  function checkboxValidation(theForm) {
      if (
      theForm.first_checkbox.checked == false &&
      theForm.second_checkbox.checked == false &&
      theForm.three_checkbox.checked == false)
      {
          alert ('Please select any checkbox to proceed further');
          return false;
      } else {
          return true;
      }
  }
  </script>

1. As we here see that we today write only JavaScript codes in our example.
2. In previous tutorials, we already many times create a full code example in which we first create an HTML form with its basic structure. Inside that structure, we use HTML, head, title, body, and script tags.
3. In this example, we have to create a form with method type post and action of any page in which you want the user to redirect.
4. Here, as we see that in the form, we use the onsubmit function to form which calls our JavaScript function. And when we see inside the form. We saw that we create four different paragraph tags and inside the first three paragraphs, we create three different checkboxes, whereas in the next one we create a submit button. These paragraphs are used to give spacing to text.
5. Now, let us see our JavaScript code which is written inside our Script tag. As we know the script tag is a paired tag. And used to write JavaScript code.
6. Inside our JavaScript codes, we use the if else statement. And inside the condition of the if statement, we apply validation that if any one of our checkboxes is selected then our condition becomes false and else is executed.
7. Whereas if our condition of if the statement becomes false then an alert is shown in which text is displayed. Please select any checkbox to proceed further.

Conclusion :-

At last, in conclusion, here we can say that with the help of this article we are able to understand how to apply validation to the selection of at least one checkbox using JavaScript.

I hope this tutorial on select atleast one checkbox validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.