Home > ASP.Net, Javascript, Jquery > Validate at least one Checkbox is checked in CheckBoxlist

Validate at least one Checkbox is checked in CheckBoxlist


Hi

try this example to Validate at least one checkbox is checked in checkboxlist using Javascript and JQuery

//– Using Javascript :-


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:CheckBoxList ID="CheckBoxList1" runat="server">
        <asp:ListItem Text="ONE" Value="1"></asp:ListItem>
        <asp:ListItem Text="TWO" Value="2"></asp:ListItem>
        <asp:ListItem Text="THREE" Value="3"></asp:ListItem>
        <asp:ListItem Text="FOUR" Value="4"></asp:ListItem>
    </asp:CheckBoxList>
    <input id="btnTest" type="button" value="Test" onclick="test();" />
    </form>
</body>
<script type="text/javascript">
        function test()
        {
            var isChecked=false;
            var checkBoxList1 = document.getElementById('<%= CheckBoxList1.ClientID %>');
            for (var r = 0; r < checkBoxList1.rows.length; r++)
            {
                var varCheckBox = checkBoxList1.rows[r].cells[0].childNodes[0]
                if (varCheckBox)
                {

                        if (varCheckBox.checked)
                        {
                            isChecked=true;
                            break;
                        }
                }
            }
            if (isChecked)
            {
                alert('Checked');
            }
            else
            {
                alert('No checkbox is checked');
            }   
       }
</script>

</html>

//– Using JQuery :-


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:CheckBoxList ID="CheckBoxList1" runat="server">
        <asp:ListItem Text="ONE" Value="1"></asp:ListItem>
        <asp:ListItem Text="TWO" Value="2"></asp:ListItem>
        <asp:ListItem Text="THREE" Value="3"></asp:ListItem>
        <asp:ListItem Text="FOUR" Value="4"></asp:ListItem>
    </asp:CheckBoxList>
    <input id="btnTest" type="button" value="Test"  />
    </form>
</body>
<script type="text/javascript">
    $('#btnTest').click(function(e)
    {
        var isChecked = false;
        var checkBoxList1 = $('#<%= CheckBoxList1.ClientID %>')[0];
        var checkedControls = $('#CheckBoxList1').find('input:checkbox:checked');

        if (checkedControls.length)
        {
            alert('Checked');
        }
        else
        {
            alert('No checkbox is checked');
        }
    });
</script>
</html>

Hope this helps

Good Luck.

Advertisements
Categories: ASP.Net, Javascript, Jquery Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: