Question

在我的MVC3剃须刀页面上使用jQuery show hide框查看过滤器复选框。

我的页面会根据是否选中这些复选框而更改，但如果取消选中任何复选框，我希望它们保持打开状态。

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

我可以返回一个布尔值，如果有任何未经检查的状态，并且正在寻找一个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！

Answer 1

你可以使用Jquery toggle（）函数或$（“componentID”）。show（）或hide（）函数

Answer 2

好的，对于我所遇到的解决方案并不是很疯狂，所以如果有人有更好更整洁的东西，请告诉我。

因此，对于每个过滤器，我通过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();
    }
});

jquery show / hide - 如果条件为true则启动打开

2 个答案: