如何为复选框值构建URL参数

Question

我正在尝试通过url传递两个复选框的值，它们都有不同的名称，只需要查看它们是否被选中或未选中。以下是html代码示例：

<input type="checkbox" name="one" value="one" checked id="one" >
<input type="checkbox" name="two" value="two" id="two" >

如何将此内容编码到URL中，以便复选框可以根据URL中的内容被选中或取消选中，例如：

www.site.com?one=unchecked&two=checked

- Ray Masa

---

你有服务器端脚本语言吗？还是想在客户端实现它？ - jtheman

如果将HTML表单模式设置为GET，则表单变量将通过URL传递。这会产生与您所显示的内容完全相同的结果，但是如果您对服务器端有控制权，则可以隐式地获取信息。如果这不是正确的方向，请明确说明问题的参数。 - Cj S.

我需要在浏览器的客户端上完成这个操作，而不是使用服务器端脚本。Cj，我想要做的是能够使用URL中的值将复选框设置为选中或未选中。例如，如果一个值为未选中，则该框将为未选中状态。 - Ray Masa

Answer 1

你可以用一点点 PHP 来实现它：

<input type="checkbox" name="one" value="one" id="one" <?= ($_GET["one"] == "checked" : "checked" : "" ?> >
<input type="checkbox" name="two" value="two" id="two" <?= ($_GET["two"] == "checked" : "checked='checked'" : "" ?>>

......或者按照你所提到的，在客户端使用Javascript：

document.body.onload = function() {
    var hash = window.location.hash().substr(1);
    var parts = hash.split("&");
    for(var i = 0; i < parts.length; i++) {
        var variable = parts.split("=");
        if(variable[0] == "one") // if the key of a get-variable equals "one"
            document.getElementById("one").setAttribute("checked");
        else if(variable[0] == "two") // if the key of a get-variable equals "two"
            document.getElementById("two").setAttribute("checked");
    }
};

希望这能有所帮助...

- atreju

---

谢谢你，阿特瑞。如果我在网页上有以上的Javascript代码，我该如何通过URL将它传递到下一个页面？我的目标是在链接被点击时，将此值传递给下一页<a href='www.site.com?box-one=unchecked&box-two=checked'>link</a>。这可能吗？ - Ray Masa