Question

我正在尝试将checked复选框中的值附加到后来用于ajax调用的url。如上所述，我只想将url的值添加到复选框中。如果用户检查然后取消选中，则表示不将该值添加到URL。下面我有一些基本的基础代码。如何将多个项目附加到网址？

<form>
<input type="checkbox" value="1" id="item1" />
<input type="checkbox" value="2" id="item2" />
<input type="checkbox" value="3" id="item3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>

<script>
$('#submitForm').click(function() {
    $('checkbox').click(function() {
    $.getJSON('www.mysite.com/mypage.php?id='+item1+item2+item3)
    });
});
</script>

Answer 1

首先给你的复选框一个特定的名称，如;

<form name="checkbox_form" id="checkbox_form">
    <input type="checkbox" value="1" id="item1" name="val1" />
    <input type="checkbox" value="2" id="item2" name="val2" />
    <input type="checkbox" value="3" id="item3" name="val3" />
    <input type="submit" id="submitForm" value="Submit Form" />
<form>

你的js会是;

$('#submitForm').click(function() {
    var url = "'www.mysite.com/mypage.php";
    if ($("#checkbox_form").serialize().length > 0) {
        url += "?" + $("#checkbox_form").serialize();     
    }
    alert("Your ajax url will be: " + url);
    $.getJSON(url)
});

这是一个工作小提琴： http://jsfiddle.net/cubuzoa/UKV3r/2/

Answer 2

您可以使用JQuery方法serialize（），如下所示：

var query = $('form').serialize()

之后：

$.getJSON('www.mysite.com/mypage.php?'+query );

仅提供输入字段属性“name”：

<form>
<input type="checkbox" value="1" id="item1" name="item1"/>
<input type="checkbox" value="2" id="item2" name="item2"/>
<input type="checkbox" value="3" id="item3" name="item3"/>
<input type="submit" id="submitForm" value="Submit Form" />
<form>

你得到：

www.mysite.com/mypage.php?item1=1&item2=2&item3=3

如果选中了所有复选框。

将多个变量（params）附加到url以进行ajax调用

2 个答案: