Showing posts with label Validate Checkbox List to select at least one item using JavaScript. Show all posts
Showing posts with label Validate Checkbox List to select at least one item using JavaScript. Show all posts

Tuesday 28 February 2023

Validate Checkbox List to select at least one item using JavaScript in .net application

Below is the code for Validating Checkbox List to select at least one item using JavaScript in .net application.

In this code, we first select all the checkboxes under the table with the ID "chklist" using querySelectorAll. We then loop through each checkbox and check if it is checked. If we find a checkbox that is checked, we set the isChecked variable to true and break out of the loop. Finally, we use the isChecked variable to determine whether at least one checkbox is checked or not, and display an error message if no checkbox is checked. 

 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" ValidateRequest="false" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server">
    <title>Validate Chackbox list</title>

    <script type="text/javascript">    

        function validate() {
            var checkboxes = document.querySelectorAll('#chklist input[type=checkbox]');
            var isChecked = false;

            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    isChecked = true;
                    break;
                }
            }

            if (isChecked == false) {
                alert("Please select at least one item from checkbox list.");
                return false;
            }
        }
    </script>

</head>

<body style="margin: 0;">
    <form id="frmHome" method="post" runat="server">
        <table id="Table1" style="width: 100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td align="center" valign="top" style="width: 100%;">

                    <asp:CheckBoxList runat="server" ID="chklist">
                        <asp:ListItem>Validate 1</asp:ListItem>
                        <asp:ListItem>Validate 2</asp:ListItem>
                        <asp:ListItem>Validate 3</asp:ListItem>
                        <asp:ListItem>Validate 4</asp:ListItem>
                    </asp:CheckBoxList>

                    <br />
                    <br />
                    <asp:Button runat="server" ID="btnval" Text="Validate" OnClientClick="return validate();" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>