ASP.NET MVC中CheckBoxList的验证

在ASP.NET MVC 4中谈到CheckBoxList，经常是与 CheckBoxList 的显示以及验证有关。我在” MVC扩展生成CheckBoxList并水平排列 “中通过扩展 HtmlHelper 做到了水平或垂直显示 CheckBoxList 。在” MVC生成CheckBoxList并对其验证 “中，借助模版实现对一组 CheckBoxList 的验证，但如果要对多组 CheckBoxList 验证，这种方法也不是很好。

比如，在电商商品模块中，关于某个类别下会有多个属性，有些属性值是单选，用 DropDownList 显示属性值；有些属性值是多选，用 CheckBoxList 显示属性值。

有如下2组 CheckBoxList

，我们要求每组至少选一项,否则报错：

如果不勾选任何选项点击”提交”,2组 CheckBoxList

后面都报错：

如果勾选1组的任意选项，1组的报错消失，并把1组的选中项显示到下方(通常要把选中项提交给服务端)，2组的报错依然存在：

如果再勾选2组的任意选项，2组的报错也消失，并把2组的选中项显示到下方：

如果不勾选1组的任何选项，1组勾选项的文字在正下方消失，1组又出现报错：

总之，本篇的实例做到了：
1、保证每组的CheckBoxList中至少有一项被选中
2、把勾选项显示出来

其实，以上的验证和显示，完全借助jQuery实现！

在Home/Index.cshtml中，当点击提交按钮或勾选/取消勾选 CheckBoxList 的选项，都执行相同的方法，那就是：遍历所有li中的所有 CheckBox ，只要每组被勾选的 CheckBox 数量为0就报错。

@{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<ul id="props" style="list-style-type: none">

<li>

组1：

<input type="checkbox" name="1" value="土豆" />土豆

<input type="checkbox" name="2" value="西红柿" />西红柿

<input type="checkbox" name="3" value="西瓜" />西瓜

<span class="err"></span>

</li>

<li>

组2：

<input type="checkbox" name="4" value="南瓜" />南瓜

<input type="checkbox" name="5" value="冬瓜" />冬瓜

<input type="checkbox" name="6" value="苦瓜" />苦瓜

<span class="err"></span>

</li>

</ul>

<input id="btnSubmit" type="submit" value="提交" />

<ul id="result">

</ul>

@section scripts

{

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script src="~/Scripts/jquery.validate.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

//点击提交按钮 每组checkboxlist组必须选择一项

$('#btnSubmit').on("click", function () {

checkCblist();

});

//勾选或取消勾选

$('#props').on("change", "input[type=checkbox]", function () {

checkCblist();

//获取勾选值

var temp = $(this).val();

if ($(this).is(":checked")) {

$('<li/>', { html: temp }).appendTo('#result');

} else {

$('#result li').filter(function () { return $.text([this]) === temp; }).remove();

}

});

//检查每组CheckBoxList，如果没有一个选中，报错

function checkCblist() {

//遍历每组li下的checkboxlist,如果没有一个选中，报错

$('#props li').each(function () {

if ($(this).find("input:checked").length == 0) {

$(this).find('.err').text("至少选择一项").css("color", "red");

} else {

$(this).find('.err').text("");

}

});

}

});

</script>

}

以上，

○

checkCblist 方法遍历每一个 li ，如果每组 CheckBoxList 被勾选的 CheckBox

数量为0就显示错误信息。

○ 点击”提交按钮”，触发

checkCblist

方法。

○ 勾选或取消勾选也触发

checkCblist 方法。而且如果勾选 CheckBox ，就在下方显示 CheckBox 的值，如果取消勾选 CheckBox 就删除正下方 CheckBox

的值。

○

filter 方法接收返回类型为bool的匿名函数参数，过滤出符合条件的元素。