Question

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

我希望让用户选中功能框并定义其大小，因此如果他们检查<input type="checkbox" id="header" name="header" value="true" />，那么我想将&show_header=true添加到查询字符串中。

我有一个非常basic fiddle set up，但我似乎无法让它正常工作。就像，如果你勾选方框，然后填写价值，但取消选中该框，它会重复开始，最后我会找到&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&amp;" + query;
    });
}

DEMO： http://jsfiddle.net/AYQyB/4/

Answer 2

看起来你正试图重新发明jQuery's .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);
   });
});

使用简单字段中的jQuery生成查询字符串？

3 个答案: