javascript 如果复选框被选中，href 到 ?page2，如果在 ?page2：保持 cb 选中，当未选中时，href 到 ?page1

Question

我对 javascript 完全陌生，我不知道如何让它工作...我稍微修改了代码，但请注意第 6 行没有意义。这是这篇文章的主要原因。

<script>
function checkReloading() {
    if (window.location.href.split=="?showpastdate") {
        document.getElementById("showpastdate").checked=true;
    } else {
        document.getElementById("showpastdate").checked=false;
    }
}

function toggleAutoRefresh(cb) {
    if (cb.checked) {
        window.location.replace("?showpastdate");
    } else {
        window.location.replace("");
    }
}
window.onload=checkReloading;
</script>

好的，我认为这很容易阅读。

首先，window.location.href.split 不起作用，因为我必须提供完整路径。但是我怎样才能使这个动态化，以便可以在更多网站上使用呢？我到处都看到：window.location.protocol + "//" + window.location.host + "/" + window.location.pathname; 但是我如何为动态网页实现这行代码？谁能举个例子？

我想用这段代码实现的是：
当 showpastdate 被选中时，href 到 ?showpastdate，当 ?showpastdate 时保持选中状态，这样我就可以在 ?showpastdate 上使用 php $_GET。这有效（当我使用静态完整网址时）。但是比...

如何修改此代码以使复选框在?showpastdate 保持选中状态，直到再次单击，而不是 url 回到原始 .php 状态或其他 GET var？

很抱歉要求编写代码，但我敢打赌，你们中的一些人可以在 2 分钟内写出这些简单的行，而我要花 8 个小时来冲浪。不打算学习javascript，但这对于我的程序来说确实是一个不错的选择，可以切换显示过去日期的项目ON/OFF，比有2个复选框更好，1个用于ON，1个用于OFF：x编辑：+提交按钮@（ O _o)@

提前感谢。

Answer 1

URL Change Event - JavaScript

http://help.dottoro.com/ljgggdjt.php

我认为您也可以使用 onchange() javascript 事件。

Answer 2

.split() 是一个可以在字符串对象上执行的函数，根据提供的参数将其拆分为多个部分：
"abcdefg|hijklmnop|qrstuvw".split('|')
会产生这样的数组：
["abcdefg","hijklmnop","qrstuvw"]

现在，我猜您在 url 中添加了一个“?showpastdate”参数，以更改复选框的“已选中”状态。 最简单的方法是：

document.getElementById("showpastdate").checked = (~window.location.href.indexOf("?showpastdate"))

这部分：window.location.href.indexOf("?showpastdate") 在 href 中搜索
"?showpastdate"
如果已找到该字符串，它将返回一个索引。如果不是，它将返回-1。 它前面的波浪线是将-1或0（或更高）转换为真/假。

不过，我不太确定 toggleAutoRefresh() 应该做什么

编辑 1

啊，对于toggleAutoRefresh()，只需添加以下内容：

if (cb.checked) {
    window.location.href.replace("?showpastdate","");
}

而不是你那里的if-else 块。 .replace() 函数处理字符串的方式与.split() 相同。它需要 2 个参数：查找什么以及替换它的内容。 所以，例如：

var someString = "words and stuff"
var result = someString.replace(" ","_");
//result will be "words_and_stuff"

编辑 2

这些功能应该可以工作：

function checkReloading() {
    document.getElementById("showpastdate").checked = (~window.location.href.indexOf("?showpastdate"))
}

function toggleAutoRefresh(cb) {
    if (cb.checked) {
        window.location.href.replace("?showpastdate","");
    }else{
        window.location.href += "?showpastdate";
    }
}

你从哪里调用 toggleAutoRefresh()？

编辑 3

我可以从你最后的评论中得出结论，你想做这样的事情：

// If a checkbox named "cb" is checked, and the url contains "?showpastedate"
if ((cb.checked) && ~window.location.href.indexOf("?showpastdate")) { 
    //Uncheck the checkbox and remove the "?showpastedate" from the url
    document.getElementById("showpastdate").checked = false;
    window.location.href.replace("?showpastdate","");
} else {
    // Else, check the checkbox and add the "?showpastedate" to the url
    document.getElementById("showpastdate").checked = true;
    window.location.href += "?showpastdate";
}

注意indexOf前面的“~”的使用。
如果string.indexOf("text") 在字符串的开头找到"text"，就像在"tekstbooks bla bla bla" 中一样，它返回0。第一个索引，从0 开始计数。

这个零在隐式转换为布尔值时被解释为false。因此，如果indexOf 在第一个索引处找到结果，它应该（在这种情况下）返回true 以指示已找到字符串。这就是为什么我们将Bitwise NOT ~ 应用于indexOf 的结果。 -1、indexOf 的“未找到”值返回 false，所有其他结果返回 true。

Answer 3

我再解释一下。

我有一个 JQuery 数据表，通过 CSS 我有不同的<tr classes>。根据存储在数据库中的信息，这些<tr> 获得不同的类，因此数据表中的颜色也不同。

现在对于<tr class>，我想为用户提供隐藏/显示选项。我正在考虑使用复选框来执行此操作，并且 javascript 会在选中时解析一个 url，并在再次取消选中时将其删除。这个URL可以让php运行不同的查询，如果$_GET['parsedurl']:查询显示所有表，elseif$_GET['empty']:查询不显示那1个信息。

但这是最糟糕的方法。我需要找到一些东西来打开或关闭表类的display: none，因为这是在客户端工作。

所以我现在考虑将 javascript 的解析保留在 URL 中，并根据 URL，我运行 .php GET 以回显 <tr style: display: none> 或只是简单地 <tr>

因此我需要一些 javascript 来执行此操作：

• 如果选中复选框，则重定向到 projectlist.php?showpastdate
• 当 URL = projectlist.php?showpastdate 时，勾选复选框。
• 当 URL = projectlist.php?showpastdate 且复选框未选中时，重定向到 projectlist.php，复选框未选中。
  

我认为这些触发器是最好的选择？

使用 .PHP 我会这样做：

if (isset($_GET['showpastdate']))
{
<tr style: display: none>
}
else
{
<tr>
}

也许有人有更好的解决方案？我想听听！

谢谢。

编辑

我现在拥有的javascript是：

<script>
function toggleAutoRefresh(cb) {
    if (cb.checked) {
        window.location.replace("?showpastdate");
    }
        // If a checkbox named "cb" is checked, and the url contains "?showpastedate"
    if ((cb.checked) && !~window.location.href.indexOf("?showpastdate")) { 
        //Uncheck the checkbox and remove the "?showpastedate" from the url
        document.getElementById("showpastdate").checked = false;
        window.location.href.replace("?showpastdate","");
    } else {
        // Else, check the checkbox and add the "?showpastedate" to the url
        document.getElementById("showpastdate").checked = true;
        window.location.href += "?showpastdate";
    }   
}
</script>

选中复选框后，它会转到页面 projectlist.php?showpastdate 并在此处取消选中。再次检查时，它转到 projectlist.php?showpastdate?showpastdate。它应该删除 ?showpastdate，而不是添加另一个。

这也可以用 PHP 做，但我真的不喜欢这个复选框的提交按钮。只需检查并执行。

Answer 4

好的。我明白了。

<script>
function toggleAutoRefresh(cb) {
    if (~window.location.href.indexOf("?hidepastdate") == 0){
        window.location.replace("?hidepastdate");
        document.getElementById("showpastdate").checked == true;
    }
    if (~window.location.href.indexOf("?showpastdate") == 0){
        window.location.replace("?showpastdate");
        document.getElementById("showpastdate").checked == true;
    }
}
</script>

现在每次点击时都会切换 URL，并且 PHP 会执行 CSS 显示工作。

感谢您的努力并为我指明了正确的方向，Cerbrus！节省了我很多时间。