在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就报错。
monospace; width: 100%; margin: 0em; background-color: #f0f0f0">@{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的匿名函数参数,过滤出符合条件的元素。