使用JavaScript发送具有不同类的多个复选框值

Hi正在生成实时筛选函数，但在发送不同类的复选框值时遇到问题：

<input type="checkbox" onclick="return test();" class="type" name="type1" value="1"  /> Trousers <br />
<input type="checkbox" onclick="return test();" class="type" name="type3" value="3"  /> T-shirts <br />
<input type="checkbox" onclick="return test();" class="type" name="type2" value="2"  /> Jackets <br />

<input type="checkbox" onclick="return test();" class="color" name="color1" value="1"  /> Red <br />
<input type="checkbox" onclick="return test();" class="color" name="color3" value="3"  /> Blue <br />
<input type="checkbox" onclick="return test();" class="color" name="color2" value="2"  /> Green <br />

裤子

T恤衫

夹克

红色

蓝色

绿色

使用此代码，我可以从所有复选框中动态获取值：

function test() {
    var counter = 0, 
        i = 0,       
        url = 'items.php?',    
        input_obj = $('input[type=checkbox]');


    for (i = 0; i < input_obj.length; i++) {
        if (input_obj[i].type === 'checkbox' && input_obj[i].checked === true) {
            counter++;
            url = url + '&a=' + input_obj[i].value;
        }
    }
    if (counter > 0) {
        alert(url);

    }
}

功能测试（）{
变量计数器=0，
i=0，
url='items.php？'，
input_obj=$（'input[type=checkbox]'）；
对于（i=0；i0）{
警报（url）；
}
}

---

但是我需要不同的类具有不同的url名称

（type-&a=value，color-&b=value）

，并将所有这些内容组合到一个url中。

通过给复选框赋予相同的名称来对其进行分组（由于您使用的是PHP，因此名称以

[]

结尾），而不是使用类。然后使用生成Ajax请求的编码数据

用于：

---

花了一段时间才明白你想表达什么

我猜您希望将复选框的当前状态发送到一个url，最有可能是在选中某个复选框之后

我真的不明白这种机制是如何与所有的onclick一起工作的。。。 我建议您重新构造代码：

从输入复选框中删除这些onclick定义，而是将test（）例程绑定到一个javascript事件，该事件在单击复选框时引发。使用像jQuery这样的javascript库可以使这更方便。对于绑定使用不同的jQuery选择器，您可以对不同的事件有不同的反应，例如按选中复选框的类别进行筛选

$('input.type').on('click',function(e){test('type',e);});
$('input.color').on('click',function(e){test('color',e);});

或者，您可以使用单个绑定并计算作为参数“e”移交的事件。您可以使用它来读取已单击元素的类

---

希望这有帮助。否则，试着弄清楚你到底想发生什么。您的目标不是“不同的类具有不同的url名称”，而是像复选框值这样的内容应该发送到不同的url，或者浏览器应该转发到不同的url，这取决于……

对复选框使用众所周知的“[]”命名样式，并将其作为get url的一部分传输实际上违反了url语法。它适用于所有浏览器，但不符合标准…@arkascha-它违反了URL语法的哪一部分？严格来说，这样的URL实际上是无效的：http:///path/script?var你好。您可以将“[]”编码为百分比表示法（这使url再次有效）。但这取决于服务器端的设置是否能按预期工作。@arkascha-因为在调用

serialize（）

时提交表单和jQuery的浏览器会对

[]

字符进行编码，这并不重要。至于服务器端，这只取决于解析URI的代码不被破坏（PHP内部使用的代码不是）。@arkascha-因为它是编码的，所以它是有效的，没有“再次”的含义。op在他们的源代码中提到了PHP，我在回答中提到了它，当时我说需要

[]

，因为op使用的是PHP。是的，你是对的。我需要在选中复选框后立即将所有复选框值发送到其他页面，如

items.php？a=1&b=2

如果我取消选中第一个复选框，它应该看起来

items.php？b=2

$('input[type=checkbox]').on('click', function () {
    alert($(this.form).serialize());
});​

$('input.type').on('click',function(e){test('type',e);});
$('input.color').on('click',function(e){test('color',e);});