显示多列复选框列表

本文关键字：列表 复选框 显示 | 更新日期: 2023-09-27 18:01:25

我现在是这样显示我的复选框列表的:

foreach (var employee in Model.Employees) {        
    @Html.CheckBox(employee.Name);<br />   
}

如果你想要一长列的复选框，这是很好的，但我的列表越来越长，所以我想显示它在2或3列

是否有简单的方法来做到这一点?我知道我可以创建一个表，然后为一列的前一半雇员放入一个for循环，然后为另一列的另一半雇员放入另一个for循环。但这看起来太原始了，必须有一个更简单，更干净的方法

显示多列复选框列表

我会使用2或3个html列表包含您的复选框，每个列表出现在标记的下一个列表之后，并使用css将每个列表浮动到左侧。

如果有10个以上的复选框，这个例子将把复选框分成2个列表:

CSS: 

.multi-list 
{
    float: left;
    padding-right: 50px;
}
.clear
{
    clear: both;
}

HTML标记w/Razor:

@{
    if (Model != null)
    {
        int itemCount = 0;        
        <ul class="multi-list">
            @foreach (var item in Model) {
                itemCount++;
                <li>
                    @Html.DisplayFor(modelItem => item.Name)
                    @Html.CheckBoxFor(modelItem => item.Active)
                </li>
                if (Model.Count() > 10 && itemCount == (int)(Model.Count() / 2))
                {
                    @Html.Raw("</ul><ul class='"multi-list'">");
                }
            }
        </ul>
        <div class="clear"></div>
    }
}
相关文章：