如何使用复选框和单选值构建 URL？
Posted
技术标签:
【中文标题】如何使用复选框和单选值构建 URL？【英文标题】：How to build a URL with checkbox and radio values? 【发布时间】：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（取决于表单中选择的内容）。
【参考方案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 与我的结合起来的组合（或方法）。请知道如何做到这一点？
【讨论】：
以上是关于如何使用复选框和单选值构建 URL？的主要内容，如果未能解决你的问题，请参考以下文章