By 07/02/2014 9 Comments

How To Make CheckBox a Required Field on WebForm using jQuery

CheckBox control

  • It is an asp.net control which is used to select the data or information by the user
  • By this control end-user can check or select more than one data items or multiple data options at a time
  • Every control in asp.net renders an html mark up on browsers

Following is an example of checkbox in asp.net with the use of Jquery

jQuery Code snippet

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->
    <script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage

            $('[id$="TT_button"]').click(function (e) { // get button object, trigger it's click event and call anonymous function

                var totalchecked = $(':checkbox:checked').length; // get all checked checkboxs, count them by using length property, assign them into totalchecked variable 
                if (totalchecked == 0) // check, if no checkbox was checked
                {
                    alert('Select Atleast One CheckBox'); // display alert
                    e.preventDefault(); // this function prevents the user to submit the form to server

                }
                else
                {

                    alert('Postback occured'); // if, above if condition false executes else and display an alert
                }

            });

        });

    </script>

ASP.NET Code snippet

<!--- Following is the code which renders the checkBoxes and a button control on browser-->

<asp:Label runat="server" Text="Check Atleast One CheckBox before submitting the Form"></asp:Label>
        <br/> <br/>
        <asp:CheckBox ID="TT_Checkbox1" runat="server" Text=" 1st Option" /><br />
        <asp:CheckBox ID="TT_Checkbox2" runat="server" Text=" 2nd Option" /><br />
        <asp:CheckBox ID="TT_Checkbox3" runat="server" Text=" 3rd Option" />
        <br /><br />
        <asp:Button ID="TT_button" runat="server" Text="Submit"/>






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .