jquery 显示/隐藏 - 如果条件为 true，则开始打开

本文关键字：true 开始 条件 显示 隐藏 如果 jquery | 更新日期: 2023-09-27 18:32:14

在我的 MVC3 剃须刀页面上处理 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 做到这一点！

jquery 显示/隐藏 - 如果条件为 true，则开始打开

你可以

使用 Jquery toggle（） 函数或 $（"componentID"）.show（） 或 hide（） 函数

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

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

和这个代码在（文档）.ready

$("input.filteritem:hidden").each(function () {
    if ($(this).val() == "True") {            
        $(this).nextAll('div.filtercontent').show();
    }
});
相关文章：