通过 <a href> 发送复选框数据

Question

我需要通过<a href></a> 发送复选框值（从 1 到 N 个复选框）。

我正在考虑为此使用 javascript，但我不知道是否可以在 <form></form> 外部的上下文中使用复选框值。

有什么建议吗？

EDIT-1：我想获取复选框值，然后导航到将这些值作为 GET 参数的 URL，即index.php?c1=1&c2=0&c3=0

Answer 1

不要硬着头皮做。只需按照通常的方式将它们放入 GET 表单中，然后单击链接提交表单。

<form name="myform" action="index.php">
    <input type="checkbox" name="c1" value="1" />
    <input type="checkbox" name="c2" value="1" />
    <input type="checkbox" name="c3" value="1" />
    <input type="checkbox" name="c4" value="1" />
    <input type="checkbox" name="c5" value="1" />
    <a href="#" onclick="myform.submit(); return false;">send</a>
</form>

或者，要完全不使用 JS（因此它也适用于屏幕阅读器、古代手机等），请使用常规提交按钮，但添加一些 CSS 使其看起来像一个链接：

<form action="index.php">
    <input type="checkbox" name="c1" value="1" />
    <input type="checkbox" name="c2" value="1" />
    <input type="checkbox" name="c3" value="1" />
    <input type="checkbox" name="c4" value="1" />
    <input type="checkbox" name="c5" value="1" />
    <input type="submit" value="send" class="link" />
</form>

例如

input[type=submit].link {
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Answer 2

我认为您想通过更改 href 属性of ana` 标记来提交复选框值，这样当用户单击它时，他们将被发送到带有作为 GET 参数提交的复选框值的 URL。

最简单的方法是使用jQuery；我建议您导入它，因为它会为您节省大量时间。如果您想要一个可靠的纯 Javascript 解决方案，请告诉我，我将向您展示如何在没有 jQuery 的情况下做到这一点。

---

您有复选框，（例如）1 到 5：

<input type="checkbox" id="cb1" value="1"/>
<input type="checkbox" id="cb2" value="0"/>
<input type="checkbox" id="cb3" value="0"/>
<input type="checkbox" id="cb4" value="0"/>
<input type="checkbox" id="cb5" value="1"/>

通过给它们一个相似的id，我们可以很容易地得到复选框的值：

function someFunction()
{
    var id=1;
    var getVars = "";
    while($("#cb"+id).length > 0)
    {
        getVars += "cb" + id + "=" + $("#cb"+id).val() + "&";
    }

    var href = "index.php?" + getVars; //Change "index.php" to the name of the page you want to navigate to.

    $("a").attr("href", href);

}

这会将<a> 标记的href 属性设置为正确的新URL：

<a href="index.php?cb1=1&cb2=0&cb3=0&cb4=0&cb5=1">

注意

除非您希望此函数更改页面上所有<a> 标记的href 属性，否则您应该为a 标记提供一个id 或一个类以在jQuery 函数中识别它。

编辑

看到你上面的编辑，由于你不需要改变a标签的属性，你可以简单地删除：

$("a").attr("href", href);

替换成

parent.location = href;

这将在函数执行时立即将用户发送到带有 GET 变量的页面。