根据复选框是否被选中，使用 jQuery 添加 URL

Question

我正在尝试使用 jQuery 附加 URL。

我的页面上有一个 'warnings' 的网格，由 servlet 填充。屏幕顶部有一个复选框，选中后将显示已清除的警告和活动的警告。基本上，此复选框用于显示和隐藏网格的行。有一个按钮可以清除警告，还有一个按钮可以清除警告。选中复选框时显示不清楚按钮。

第一次单击复选框时，URL 会正确附加。但是，取消选中该复选框时，不清楚的按钮会粘住并且 URL 未正确附加。

这是我的 jQuery:

 $(document).ready(function() 
   {
      var showClearedWarningsFlag = getURLParameter("showHideClearedWarnings");

  if(showClearedWarningsFlag = "SHOW")
  {
     $('#showClearedWarningsCheckBox').prop('checked', true);
     $('#unclearButton').show();
  }
  else
  {
     $('#showClearedWarningsCheckBox').prop('checked', false);
     $('#unclearButton').hide();
  }

});


 $('#showClearedWarningsCheckBox').change(function ()
 {
    if($(this).is(':checked'))
    { 
       window.location.search = "?showHideClearedWarnings=" + "SHOW";    
    }
    else
    {
       window.location.search = "?showHideClearedWarnings=" + "HIDE";
    }

 });

$('#clearButton').click(function(){
         $('#bagWarningAction').val('CLEAR') ;
    });

   $('#unclearButton').click(function(){
       $('#bagWarningAction').val('UNCLEAR') ;
   });

所以，我想在这里做的是：

if URL is show
   then show unclear button and check box
else if URL is hide
   don't show unclear button and don't check box
on change of checkbox
   if checked
      append URL to show
   else if not checked
      append URL to hide

然后，我有两个按钮用于通过 SHOW 或 HIDE 传递到我页面上的隐藏输入。

但是，当我按下显示已清除警告的复选框时，会成功附加 URL，但在页面刷新时未选中该复选框。因此，再次选中该复选框后，它只是重定向到 SHOW URL。如果我手动将 URL 更改为 HIDE，它会隐藏已清除的警告。

我想我在这里遗漏了一些非常微妙的东西。如果有人能阐明为什么复选框无法在刷新后幸存下来，我将不胜感激！

Answer 1

编辑：这次我更仔细地重读了你的问题。你可以检查控制台，可能有一个错误（错误的 ID，什么不是）。否则我认为您的代码没有问题。下面的文字仍然适用，您可能想使用 cookie，它比 URL 参数更耐用（更不用说对最终用户来说更漂亮了）。

根据定义，复选框值无法在刷新后保留下来。这是一个输入，它们的值不会被存储，除非您手动这样做（例如，通过 cookie）。

因此您可以尝试通过 jQuery 创建一个 cookie 来保存复选框的最后一个已知值。

我建议阅读此 SO 回复以了解如何做到这一点 How do I set/unset cookie with jQuery?

Answer 2

我已经解决了这个问题。真的，非常愚蠢的错误。在我的 if 检查中，我总是更改 URL 以显示，因为我使用一个等号而不是两个等号。

哎呀！

根据复选框是否被选中，使用 jQuery 添加 URL

Appending URL using jQuery based on whether a checkbox is checked

html

javascript

java

jquery

page-refresh