Question

您正在制作实时过滤功能，但在从不同类中发送复选框值时遇到问题：

<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 />

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

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);

    }
}

但是我需要不同的类具有不同的网址名称(type - &a=value, color - &b=value)并将所有这些结合到一个网址。

Answer 1

对复选框进行分组，方法是为它们提供相同的名称（因为您使用的是PHP，因此使用[]结束该名称），而不是使用类。然后使用serialize生成Ajax请求的编码数据。

example：

<form>

<label><input type="checkbox" name="type[]" value="1"  /> Trousers </label>
<label><input type="checkbox" name="type[]" value="3"  /> T-shirts </label>
<label><input type="checkbox" name="type[]" value="2"  /> Jackets </label>

<label><input type="checkbox" name="color[]" value="1"  /> Red </label>
<label><input type="checkbox" name="color[]" value="3"  /> Blue </label>
<label><input type="checkbox" name="color[]" value="2"  /> Green </label>

</form>

和

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

Answer 2

花了一段时间来了解你想要表达的内容......

我猜您希望将复选框的当前状态发送到一个网址，很可能只要选择了一些复选框。

我真的不明白这个机制如何适用于所有的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，具体取决于......

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

2 个答案: