使用 JavaScript 进行 ASP.NET CheckBoxList 客户端验证

引言

在这篇博文中，我们将探讨一种技巧，用于验证 CheckBoxList 中的任何 CheckBox 是否被选中。

问题

当你在 aspx 页面中定义一个 CheckBoxList 时，代码如下…

<asp:CheckBoxList RepeatDirection="Horizontal" 
                  ID="chkDemo"
                  runat="server">
    <asp:ListItem Text="Apples" Value="1"></asp:ListItem>
    <asp:ListItem Text="Oranges" Value="2"></asp:ListItem>
    <asp:ListItem Text="Mangoes" Value="3"></asp:ListItem>
</asp:CheckBoxList>

…它将在浏览器中呈现如下…

<table id="chkDemo">
    <tbody>
        <tr>
            <td>
                <input type="checkbox" value="1" name="chkDemo$0" id="chkDemo_0">
                <label for="chkDemo_0">Apples</label>
            </td>
            <td>
                <input type="checkbox" value="2" name="chkDemo$1" id="chkDemo_1">
                <label for="chkDemo_1">Oranges</label>
            </td>
            <td>
                <input type="checkbox" value="3" name="chkDemo$2" id="chkDemo_2">
                <label for="chkDemo_2">Mangoes</label>
            </td>
        </tr>
    </tbody>
</table>

基本上，它会根据 CheckBoxList 内部的 ListItems 数量呈现多个 CheckBoxes。

那么，这里的逻辑是什么？

我们将会在 按钮点击 时调用一个 JavaScript 函数。
按钮看起来会像这样…

<asp:Button runat="server" ID="Button1" Text="Submit" 
            OnClientClick="return validateCheckBoxList();" />

在该函数内部，我们将运行以下逻辑来验证是否有任何 CheckBox 被选中。

1. 我们将首先找到主要的 CheckBoxList，它被呈现为 Table。
2. 接下来，我们需要找到该 Table 内部的所有 CheckBox。
3. 之后，我们需要通过循环遍历它们来检查是否有任何 CheckBox 被选中。
4. 如果任何 CheckBox 被选中，则中断循环并显示警报（仅用于演示目的）。
5. 如果任何 CheckBox 被选中，则返回 true，否则显示警报并返回 false。

function validateCheckBoxList() {
    var isAnyCheckBoxChecked = false;

    // ::: Step-1 & 2 ::: Let's get all the CheckBoxes inside the CheckBoxList.
    var checkBoxes = document.getElementById("chkDemo").getElementsByTagName("input");
    
    // ::: NOTE ::: For jsfiddle demo I have directly used the ID. 
    // Otherwise you might have to use ClientID like below...
    // document.getElementById
    // ("<%= chkDemo.ClientID %>").getElementsByTagName("input");

    // ::: Step-3 ::: Now let's Loop through the Children.
    for (var i = 0; i < checkBoxes.length; i++) {
        if (checkBoxes[i].type == "checkbox") {
            if (checkBoxes[i].checked) {
                // ::: Step-4 ::: If current CheckBox is checked, then show alert.
                // Break the Loop.
                isAnyCheckBoxChecked = true;
                alert("Atleast one CheckBox is checked");
                break;
            }
        }
    }
 
    // ::: Step-5 ::: Check if any CheckBox is checked or not.
    // Show alert and return accordingly.
    if (!isAnyCheckBoxChecked) {
        alert("No CheckBox is Checked.");
    }

    return isAnyCheckBoxChecked;
}

查看演示

这里

注意

我直接使用了 CheckBoxList ID，即 chkDemo。但是当你的 ClientID 发生变化时，你可以这样获取 CheckBoxList…

document.getElementById("<%= chkDemo.ClientID %>");

你觉得有趣吗？

分享你对这篇博文的想法。别忘了点赞和分享。
CodeProject