jquery - 使用 jQuery 从简单字段生成查询字符串？

Question

我有一些非常简单的字段，比如是/否的复选框和一些宽度/高度的文本输入等。

我想让用户选中一个功能框并定义他们的大小，所以如果他们选中，<input type="checkbox" id="header" name="header" value="true" />那么我想添加&show_header=true到查询字符串中。

我已经设置了一个非常基本的小提琴，但我似乎无法让它正常工作。就像，如果您选中该框，然后填写值，但取消选中该框，它开始重复事情，我最终得到&show_header=true&show_header=true&show_header=true&show_header=true&show_header=true

Answer 1

您可以简单地使用serialize()方法：

function displayVals() {
    $("code").html(function(i, val) {
        var query = $("input").serialize();
        return "http://...?method=review_box&" + query;
    });
}

演示：http: //jsfiddle.net/AYQyB/4/

Answer 2

看起来您正在尝试重新发明jQuery 的 .serialize()函数。

<form>
    <div><input type="text" name="a" value="1" id="a" /></div>
    <div><input type="text" name="b" value="2" id="b" /></div>
    <div><input type="hidden" name="c" value="3" id="c" /></div>
    <div>
        <textarea name="d" rows="8" cols="40">4</textarea>
    </div>
    <div><select name="e">
        <option value="5" selected="selected">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select></div>
    <div>
        <input type="checkbox" name="f" value="8" id="f" />
    </div>
    <div>
        <input type="submit" name="g" value="Submit" id="g" />
    </div>
</form>

jQuery：

$('form').submit(function() {
    alert($(this).serialize());
    return false;
});

产生：

a=1&b=2&c=3&d=4&e=5

Answer 3

可能是这样？

<input class="my-vars" type="checkbox" name="rbshowheader" id="rbshowheader" value="true" />
<input class="my-vars" type="text" name="rbwidth" id="rbwidth_id" value="" />
<pre><code>http://yoursite.whirlocal.com?method=review_box</code><span id="query"></span></pre>

和 JavaScript

$(function() {
  $('.my-vars').change( function() {
     var sQuery = $('.my-vars').serialize();
     $('#query').html('&'+sQuery);
   });
});