jquery - jQuery不会以隐藏在CSS中的形式更改输入值

我有一个使用jQuery 3.2.1的应用程序。它具有2个分别称为#primarySearch和#advancedSearch的搜索形式。

#primarySearch始终可见，但#advancedSearch在页面加载时隐藏：

<form id="primarySearch">

</form>

<form id="advancedSearch" style="display: none;">

</form>

有一个显示/隐藏#advancedSearch的按钮，如下所示：

/* Open Advanced Search */
$('#advancedSearchCta b').click(function(){
    $('#advancedSearch').toggle();
    $('#advancedSearchCta').hide();
});

/* Close Advanced Search */
$('#closeAdvancedSearch').click(function(){
    $('#advancedSearch').toggle();
    $('#advancedSearchCta').show();
});

这很好。

每个表格都包含许多输入。我实现了一个按钮（#resetSearchBtn）来清除所有表单输入-实际上是一个“重置搜索”按钮：

 $('#resetSearchBtn').click(function(e){
    e.preventDefault();
    $(':input','#primarySearch, #advancedSearch')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
 });

如果#advancedSearch可见，则可以正常工作。但是，如果用户关闭了高级搜索-从而将其切换回display: none;，则它将不起作用。基本上，只有在#advancedSearch可见的情况下，它才会重置搜索。

我不能依靠它，因为用户可以打开高级搜索，输入内容，然后关闭它，然后尝试进行重置。它将其数据保留在#advancedSearch中。该应用程序是基于Ajax的，并会响应以形成更改。因此，它基本上将“错误的”数据提交给服务器。

这是我应该寻找的正常行为还是我的应用程序中存在一些冲突？有什么解决方案？

最佳答案

对于您的代码有奇怪的行为，我并不感到惊讶。根据此代码：

$(':input','#primarySearch, #advancedSearch')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');

您可以采用表格中的所有输入内容（包括复选框和单选框）。您将值设置为''。至此，您的复选框和收音机已经失效。您将删除所有内容的attr checked和selected。

第一：不要设置复选框和单选框的值。我认为这不是您想要的。

第二：checked和selected是布尔属性，必须使用.prop()处理

第三：您的代码省略了所有隐藏的元素（由于:hidden中的.not选择器）。因此，如果表单被隐藏，它将不起作用。明显。

关于jquery - jQuery不会以隐藏在CSS中的形式更改输入值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45277893/