JS

Validate one CheckBox is selected using jQuery on Submit Button

Here Laxmikant has explained with an example, Validate one CheckBox is selected using jQuery on Submit Button.

When the user click on Submit Button, all the CheckBoxes using FOR loop, it will be validated that at-least one CheckBox is checked from the Group of CheckBoxes using jQuery. If the checkbox is not checked and clicked on submit button it’s show alert message.

In this article I will explain with an example, Validate one CheckBox is selected using jQuery on Submit Button,

When the user click on Submit Button, all the CheckBoxes using FOR loop, it will be validated that at-least one CheckBox is checked from the Group of CheckBoxes using jQuery. If the checkbox is not checked and clicked on submit button it’s show alert message.

Before learn Validate one CheckBox is selected using jQuery on Submit Button. It’s mandatory to know about why use Checked attribute?

The checked attribute only define the initial state of the checkbox, and not the current state.

Code for Validate one CheckBox is selected using jQuery on Submit Button. Simply copy and paste this code

<!DOCTYPE html>

<!--Validate Group of CheckBoxes (Multiple CheckBoxes) using jQuery-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      //code for Validate one CheckBox is selected using jQuery on Submit Button

   <script type="text/javascript">
        $(function () {
            debugger;
            $("#btnSubmit").click(function () {
                var checked = $("#tblHobbies input[type=checkbox]:checked").length;
                var isChecked = checked > 0;
                if (isChecked) {
                    var selectedHobbies = $("#tblHobbies input[type=checkbox]:checked").val();
                    alert("your hobbies is " + selectedHobbies);
                }
                else {
                    alert("Please select hobbies");
                }
            });

        });
    </script>
</head>
<body>
    <table id="tblHobbies" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td><input type="checkbox" value="Swimming" /></td>
            <td>Swimming</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="Singing" /></td>
            <td>Singing</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="Dancing" /></td>
            <td>Dancing</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="Coding" /></td>
            <td>Coding</td>
        </tr>
    </table>
    <br />
    <input type="button" value="Submit" id="btnSubmit" />
</body>
</html>

Output:

Validate one CheckBox is selected using jQuery on Submit Button

Any question and suggestion related to this article please comment me.

Leave a Reply

Your email address will not be published. Required fields are marked *