复选框切换页面视图

Checkbox toggles the page view

本文关键字：视图 换页 复选框      更新时间：2023-09-26

我想为用户提供一个"高级搜索"页面，该页面可以通过复选框打开或关闭。 我制作了一个在页面其余部分分层的div，并像这样使用复选框： 

style.display = "none"
style.display = "block"

这效果很好，因为我想要的基本上是一个模态对话框，所以对我来说很有意义。

我添加了一个"重置"按钮，该按钮应清除所有字段，然后再次显示"高级搜索"页面。 我不知道如何完成所有这些。 我有两个想法，但都行不通：

  1. 重置搜索词的会话变量，然后以某种方式告诉刷新页面以打开复选框。
  2. 不要显示或隐藏div，而是使用专用的"高级搜索"页面。 此页面是带有参数 ？search=true 的根 URL。 该复选框在带参数和不带参数的 URL 之间切换。 似乎更容易控制。

我尝试将这种代码用于解决方案#2没有奏效：

function ModalPage() {
    if( self.location == location ) 
         { self.location = "?search=true"; }
    else { self.location = location; }
    // (some attempts looked less silly than this...)of #2
}

您的解决方案？

将此选项存储在会话中然后再次加载页面怎么样？ 在页面加载时，您可以检查该会话变量，如果已设置，则选中复选标记。

您的意思是您有一个简单的"搜索页面"和"高级搜索"页面吗？或者您只有一个页面，单击复选框后显示和隐藏高级搜索功能？

在第二种情况下，您可以添加一个名为"reset"的新javascript函数，并将该函数与重置按钮相关联：

<input type="button" id="resetButton" onclick="reset();" value="Reset"/>

在新的javascript"重置"功能中，您可以进行两个操作：重置所有字段，并显示高级搜索组件

function reset() {
    //reset all the fields
    ....
    document.getElementById(YOUR_ADVANCED_SEARCH_ID).style.display = "block";
}

在第一种情况下，重置功能可以简单地重定向到高级搜索页面，例如

location.href = "advancedSearchPage.XXX";
相关文章：