附加到 href 的复选框列表答案

【问题标题】：List of checkboxes attached to a href附加到 href 的复选框列表
【发布时间】：2012-03-05 00:43:07
【问题描述】：

我会先说明我知道这是一个奇怪的请求，但是对于这个特定的项目，它不能以其他方式完成。

我有一个包含数百个复选框的列表作为表单的一部分。在表单之外，我有一个链接指向一个单独的页面，我想将选中的复选框列表附加到该页面。示例：

<form name="sampleForm" method="POST" action="process.php">
    <input type="checkbox" name="checkbox_1" />
    <input type="checkbox" name="checkbox_2" />
    <input type="checkbox" name="checkbox_3" />
</form>

<a href="otherPage.php>Alternate Page</a>

我需要的是当有人点击备用页面链接时，复选框会像 GET 语句一样附加：

otherpage.php?checkbox_1=1&checkbox_2=1

或者类似的东西，任何可以解决此类问题的建议都会很棒。我对重写大部分代码或用提交按钮替换它不感兴趣。

【问题讨论】：

标签： jquery html forms hyperlink http-get

【解决方案1】：

您可以通过将 javascript 附加到链接来执行此操作。将 HTML 更改为：

<a id="otherPageLink" href="otherPage.php>Alternate Page</a>

添加这个javascript：

$("#otherPageLink").click(function() {
    var checkStr = [];
    $("form[name='sampleForm'] input[type='checkbox']").each(function() {
        checkStr.push(this.name + "=" + this.checked ? 1 : 0);
    });
    window.location = this.href + "?" + checkStr.join("&");
    return(false);
});

它的工作原理如下：

将点击处理程序附加到链接。
获取该表单中的所有复选框
遍历每个复选框，根据其值为每个复选框构建一个字符串并将它们全部放入一个数组中
获取链接的原始 URL，并将其与复选框的所有查询参数结合起来，然后转到该 URL
返回 false 以防止正常处理链接

【讨论】：

【解决方案2】：

我会尝试这样的：

$('a').click(function(){
  $('form').attr('method', 'GET');
  $('form').attr('action', 'otherPage.php');
  $('form').submit();
});

如果你把 id 放在你的字段上，你可以使用更好的 jquery 选择器。

【讨论】：

你应该总是缓存你的选择器var $form = $('form'); $form.attr('...');
@John 更快：D。关于这个解决方案，唯一需要注意的是，未选中的复选框根本不会提交（如预期的那样）。当然，如果这是所需的行为，您可以在提交之前“检查”所有复选框。

【解决方案3】：

查询字符串使用这个标记

<form id="sampleForm" method="POST" action="process.php">
    <input type="checkbox" name="checkbox_1" />
    <input type="checkbox" name="checkbox_2" />
    <input type="checkbox" name="checkbox_3" />
</form>

<a id="alt_page_link" href="otherPage.php">Alternate Page</a>

还有这个 JS

$('#alt_page_link').click(function(){
    var href=$(this).attr('href')+'?'+ $('#sampleForm').serialize();
   $(this).attr('href',href)
})

使用此代码，复选框值将是浏览器默认的“打开”。假设您希望附加到 Alt Page ling 并跟随该页面

编辑演示http://jsfiddle.net/SjwrC/

【讨论】：