如何使用复选框和单选值构建 URL？答案

【问题标题】：How to build a URL with checkbox and radio values?如何使用复选框和单选值构建 URL？
【发布时间】：2015-08-11 01:11:28
【问题描述】：

我直接将这个基本的serialize() example 复制粘贴到本地 html，它可以打印字符串（显然）。

但是我很难用这个字符串创建一个 url。我的目标是创建一个如下所示的链接（或表单操作）：

<a href="node/1?single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1">Click me</a>

但是当 a 执行以下操作时：

var mylink = showValues();
document.write('<a href="node/1?'+mylink+'">Click me</a>');

...它会向我抛出“未定义”错误。

请问有大神知道怎么弄吗？

这是完整的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>serialize demo</title>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form class="myform">
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>

  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>

  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>

  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>

<p><tt id="results"></tt></p>

<script>
  function showValues() {
    var str = $( ".myform" ).serialize();
    $( "#results" ).text( str );
  }
  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
  $( "select" ).on( "change", showValues );
  showValues();
</script>

</body>
</html>

【问题讨论】：

showValues 返回什么？
您对document.write 的调用看起来不错。这很可能在您的 showValues 函数中。你介意分享一下吗？您是否尝试过使用 Chrome 的调试器查看错误在哪里？
嗨，我已经在 OP 中添加了完整的代码。 showValues 返回此字符串：single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1（取决于表单中选择的内容）。

标签： jquery forms url serialization

【解决方案1】：

试试这个：

function showValues() {
    var str = $( "form" ).serialize();
    $( "#results" ).text( str );
    return str; // need to return result
}

你的函数做了一些事情，但实际上并没有返回它。为了填写myLink，您需要返回“str”

【讨论】：

【解决方案2】：

感谢 user3191461，现在它确实在页面加载时显示字符串，但在选择其他选项时它不会改变。

我发现这种方法有效：

<script type="text/javascript">

  function showValues() {
    var str = $( ".myform" ).serialize();
    $("a.mylink").attr("href", "node/1?"+str);   
  }
  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
  $( "select" ).on( "change", showValues );  

   showValues();

</script>

如您所见，我在脚本中添加了$("a.mylink").attr("href", "node/1?"+str);，并将以下html-code放在脚本标签之外：

<a href="node/1" class="mylink">Click me</a>

（注意 Drupal 可能需要 jQuery.noConflict(); 方法）

编辑：仍然是个问题。复选框应该像这样构建check=1,2（作为一个数组）而不是check=1&check=2...

解决方案（复选框为数组）：

<script type="text/javascript">
  jQuery.noConflict();

  function showValues() {
    var radios = jQuery('input[type=\'radio\']:checked').map(function() { return this.value; }).get().join(', ');
    var checkboxes = jQuery('input[type=\'checkbox\']:checked').map(function() { return this.value; }).get().join(', ');
    jQuery("a.mylink").attr("href", "node/1?chks="+checkboxes+"&rads="+radios);  
  }
  jQuery( "input[type='checkbox']" ).on( "click", showValues );
  jQuery( "input[type='radio']" ).on( "click", showValues );

   showValues();

</script>

默认情况下该链接将为 node/1，但一旦单击某个选项，就会在其后面构建字符串。在这种情况下，我将从空值开始，因此无需执行更多操作。

但如果我从选定的值开始（默认情况下必须将其放置在 url 中），我的解决方案是不够的。

因此，完美的解决方案是将user3191461's solution 与我的结合起来的组合（或方法）。请知道如何做到这一点？

【讨论】：