再议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="土豆" />土豆
        &nbsp;
        <input type="checkbox" name="2" value="西红柿" />西红柿
        &nbsp;
        <input type="checkbox" name="3" value="西瓜" />西瓜
        &nbsp;
        <span class="err"></span>
    </li>
    <li>
        组2：
        <input type="checkbox" name="4" value="南瓜" />南瓜
        &nbsp;
        <input type="checkbox" name="5" value="冬瓜" />冬瓜
        &nbsp;
        <input type="checkbox" name="6" value="苦瓜" />苦瓜
        &nbsp;
        <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的匿名函数参数，过滤出符合条件的元素。