Validating a check box using jquery and displaying custom alert

Last Reply on Feb 08, 2012 07:39 AM By Dorababu

Posted on Feb 08, 2012 06:50 AM

Hi all I am having two check-boxes and a button on my form

I use the below on to alert the custom alerts as per my need

http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

 

<form id="form1" runat="server">
<asp:CheckBox ID="checkArray" runat="server" Text="Check Me" />
<asp:CheckBox ID="checkArray1" runat="server" Text="Check Me" />
<p>
  <asp:button id="btnDelete" text="Show Alert"/>
</p>
</form>

 have written the script to find out whether check box are checked or not as follows

 


<script type="text/javascript">

    $(document).ready(function () {
        $("#btnDelete").click(function () {
            var inputs = document.getElementsByTagName("input");
            var flag = 0;
            for (var i = 0; i < rbs.length; i++) {
                if (rbs[i].type == "checkbox") {
                    if (rbs[i].checked) {
                        flag = 1;
                        break;
                    }
                }
            }
            if (flag == 0) {
                alert('msg');
                //var atLeastOneIsChecked = $('#checkArray :checkbox:checked').length > 0;

                //if (atLeastOneIsChecked == 0) {
                jAlert('Select One', 'Alert Dialog');

            }
        });
    });

</script>

But I am unable to see the required alert. Where as the below one works perfectly

 


<form id="form1" runat="server">

    <fieldset id="checkArray">
        <div>
            <input name="list" id="list0" type="checkbox" value="newsletter0">zero</div>
        <div>
            <input name="list" id="list1" type="checkbox" value="newsletter1">one</div>
        <div>
            <input name="list" id="list2" type="checkbox" value="newsletter2">two</div>
    </fieldset>
    <p>
        <input id="btnDelete" type="button" value="Show Alert" />
    </p>
    </form>

<script type="text/javascript">

    $(document).ready(function () {
        $("#btnDelete").click(function () {
            var atLeastOneIsChecked = $('#checkArray :checkbox:checked').length > 0;

            if (atLeastOneIsChecked == 0) {
                jAlert('Select One', 'Alert Dialog');

            }
        });
    });

</script>

Now to work this out the same using asp.net controls where should I change can any one help me.. 

 

I also done another thing that it if a check box is checked and when user clicks on button i am alerting like Confirm box with the following script

 

 <script type="text/javascript">

        $(document).ready(function () {
            $("#btnDelete").click(function () {
                var atLeastOneIsChecked = $('#checkArray :checkbox:checked').length > 0;

                if (atLeastOneIsChecked == 0) {
                    jAlert('Select One', 'Alert Dialog');
                }
                else {
                    $("#btnDelete").click(function () {
                        jConfirm('Can you confirm this?', 'Confirmation Dialog');

                    });
                }
                });
            
        });

This also have a problem i.e for the first time the confirm box is not showing and if once i check the check-box and click on button confirm box is displayed. If i un check it and click on  the button the same confirm message is getting displayed instead of alert box. Can any one help me..

Results 1 - 5 of 8 12
Posted on Feb 08, 2012 06:51 AM

To make it work with ASP Button add last line as

return false;

in the click event of the button


Posted on Feb 08, 2012 07:13 AM

Can you mention where should i add that


Posted on Feb 08, 2012 07:17 AM

In the click function

$("#btnDelete").click(function () {

///Your code

 

return false;

});


Posted on Feb 08, 2012 07:24 AM

Khan perfect but when i select a check box and click on button the check box selection I made is getting un checked. Is there any option to attach code files here


Posted on Feb 08, 2012 07:33 AM

Sorry there is no option to attach codes.

Anyways. Check whether there's postback occuring