0

在我的 MVC3 razor 页面上处理用于过滤复选框的 jQuery 显示隐藏框。

我有一个页面，该页面会根据这些复选框是否被选中而改变，但如果有任何复选框未被选中，我希望它们保持打开状态。

目前显示/隐藏有效，但是如何根据是否选中任何复选框来确定页面是否加载显示/隐藏？

我可以返回一个布尔值来说明是否有任何未选中，并且真的在寻找一个 jQuery 天才来帮助我用最好/最整洁的方法来实现这一点。

这是其中一个过滤器的示例，其中 modeFilterList 是每个复选框的通用列表，包含名称、ID 和检查状态：

<div id="filterwrap">
    <h2 class="filter">Filter your results</h2>
    @using (Html.BeginForm())
    {
    <ul id="filter">
        <li>
            <h2>                            
                <a href="#">Modes</a></h2>
            <div class="filtercontent">
                @foreach (var item in modeFilterList)
                {
                    <div class="radiorow">
                        @Html.CheckBox("mode_" + item.ID, item.Checked)
                        @item.Name
                    </div>
                }   
            </div>
            <!-- end of filtercontent -->
        </li>
    </ul>
    }
</div>

这是用于显示和隐藏的 jquery 代码：

$('#filterwrap li h2').live('click', function (e) {
    $(this).next('div.filtercontent').slideToggle() ;
    e.preventDefault();  //stops page jumping to top
});

我想过在页面重新加载时可以读取的 h2 下方包含一个包含真/假值的隐藏字段，但是必须有更好的方法来使用 jQuery 来做到这一点！

4

2 回答 2

2

您可以使用 Jquery toggle() 函数或 $("componentID").show() 或 hide() 函数

于 2012-04-26T09:05:13.737 回答
0

好的，我对我提出的解决方案并不疯狂，所以如果有人有更好更整洁的解决方案，请告诉我。

因此，对于每个过滤器，我通过 viewbag 传递一个 bool 参数以显示是否已选择任何复选框。

bool modeStatus = ViewBag.modeStatus;

然后我添加了一个带有类的隐藏字段：

<div id="filterwrap">
    <h2 class="filter">Filter your results</h2>
    @using (Html.BeginForm())
    {
    <ul id="filter">
        <li>
            @Html.Hidden("mode", modeStatus, new { @class = "filteritem" })
            <h2>                            
                <a href="#">Modes</a></h2>
            <div class="filtercontent">
                @foreach (var item in modeFilterList)
                {
                    <div class="radiorow">
                        @Html.CheckBox("mode_" + item.ID, item.Checked)
                        @item.Name
                    </div>
                }   
            </div>
            <!-- end of filtercontent -->
        </li>
    </ul>
    }
</div>

和 (document).ready 中的这段代码

$("input.filteritem:hidden").each(function () {
    if ($(this).val() == "True") {            
        $(this).nextAll('div.filtercontent').show();
    }
});
于 2012-04-26T10:23:35.663 回答