Question

Hi making a live filter function, but having a problem to send checkbox values from different classes:

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

With this code I’m able to get values dynamicaly from all checkboxes:

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

    }
}

But I need that different class have different url name (type - &a=value, color - &b=value) and combine all this to one url.

Answer 1

Group the checkboxes by giving them the same name (end that name with [] since you are using PHP), not by using classes. Then use serialize to generate the encoded data for your Ajax request.

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

​
and

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