使用jquery验证复选框并显示自定义警报

时间:2012-02-08 10:26:56

标签: jquery asp.net

大家好,我的表格上有两个复选框和一个按钮

我使用下面的内容根据我的需要提醒自定义提醒

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>

我编写了脚本以确定是否选中了复选框,如下所示

<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>

但我无法看到所需的警报。以下哪一个完美无缺

<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>

现在使用asp.net控件来解决这个问题,我应该在哪里更改,任何人都可以帮助我..

2 个答案:

答案 0 :(得分:2)

您要保存input中的复选框:

var inputs = document.getElementsByTagName("input");

但循环遍历rbs

for (var i = 0; i < rbs.length; i++) {

如果您在网站上使用jQuery,那么将jQuery用于此任务是明智的。我很确定你能做到:

$(document).ready(function () {
    var form = $('#form1');
    $("#btnDelete").click(function () {
        if ( !form.find(':checkbox:checked').length ) {
            jAlert('Select One', 'Alert Dialog');
        }
    });
});

...在您的ASP表单中。

答案 1 :(得分:0)

毕竟我解决了它,在脚本中加入false对我来说效果很好

<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 () {
                     var atLeastOneIsChecked = $('#checkArray :checkbox:checked').length > 0;

                     if (atLeastOneIsChecked == 0) {
                         jAlert('Select One', 'Alert Dialog');
                         //return false;
                     }
                     else {
                         jConfirm('Can you confirm this?', 'Confirmation Dialog');
                         //return false;
                     }

                 });
             }
             return false;
         });

     });

</script>