在开发Web应用程序时，经常需要处理表单验证。特别是，可能需要验证用户是否已经选择了某些选项。在ASP.NET中，CheckBoxList控件允许用户从一组选项中选择多个项目。本文将介绍如何验证CheckBoxList中的复选框是否被选中。
假设在ASP.NET页面上定义了一个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>
这将在浏览器中渲染成如下HTML：
<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中的ListItem数量渲染出相应数量的复选框。
将在按钮点击时调用一个JavaScript函数。按钮看起来像这样：
<asp:Button runat="server" ID="Button1" Text="Submit" OnClientClick="return validateCheckBoxList();" />
首先，需要找到主CheckBoxList，它在渲染后是一个表格。接下来，需要找到表格内的所有复选框。然后，需要通过循环检查它们是否被选中。如果有任何复选框被选中，那么中断循环并显示一个警告（仅作为演示目的）。如果有任何复选框被选中，返回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("At least 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;
}
document.getElementById("<%= chkDemo.ClientID %>");