Need help saving values from a checkbox without a form - php

Question

Hello I will try an explain myself as clear as possible. I'm trying to add a filter products using multiple checkboxes that the user can click on that will alter the my php mysql query.
I have seen some examples of this online but they just show and hide divs. I would like to take the value of the checkboxes click and insert them in the query dynamically.
So my questions is how could I pass a value from multiple checkboxes with out using a form?
<div id="filterContentTitle">Filter Results</div>
<div id="filterContentResults">
<div id="filterContentCat">Categories</div>
<input type='checkbox' name='categories' value='1' /><label for='categories'>Dishwashers</label><br /><input type='checkbox' name='categories' value='2' /><label for='categories'>Hoods</label><br /><input type='checkbox' name='categories' value='3' /><label for='categories'>Microwaves</label><br /><input type='checkbox' name='categories' value='4' /><label for='categories'>Refrigerators</label><br /><input type='checkbox' name='categories' value='5' /><label for='categories'>Stoves & Ranges</label><br /><input type='checkbox' name='categories' value='6' /><label for='categories'>Washers & Dryers</label><br /> </div>
<hr />
<div id="filterContentResults">
<div id="filterContentCat">Brands</div>
<input type='checkbox' name='brand[]' value='GE' /><label for='brand'>GE</label><br /><input type='checkbox' name='brand[]' value='Viking' /><label for='brand'>Viking</label><br /><input type='checkbox' name='brand[]' value='Whirlpool' /><label for='brand'>Whirlpool</label><br /> </div>
<hr />
<div id="filterContentResults">
<div id="filterContentCat">Refrigerators Type</div>
<input type='checkbox' name='subCategory[]' value='French Door'><label for='subCategory'>French Door</label><br /><input type='checkbox' name='subCategory[]' value='Bult-In'><label for='subCategory'>Bult-In</label><br /><input type='checkbox' name='subCategory[]' value='Side by Side'><label for='subCategory'>Side by Side</label><br /> </div>
<hr />
<div id="filterContentResults">
<div id="filterContentCat">Refrigerators Capacity</div>
<input type='checkbox' name='capacity[]' value='20.7 cu ft'><label for='capacity'>20.7 cu ft</label><br /><input type='checkbox' name='capacity[]' value='28.6 cu ft'><label for='capacity'>28.6 cu ft</label><br /><input type='checkbox' name='capacity[]' value='20.4 cu ft'><label for='capacity'>20.4 cu ft</label><br /><input type='checkbox' name='capacity[]' value='24.6 Cu. Ft.'><label for='capacity'>24.6 Cu. Ft.</label><br /><input type='checkbox' name='capacity[]' value='25 cu. ft.'><label for='capacity'>25 cu. ft.</label><br /><input type='checkbox' name='capacity[]' value='22.0 Cu. Ft.'><label for='capacity'>22.0 Cu. Ft.</label><br /> </div>
<hr />
<div id="filterContentResults">
<div id="filterContentCat">Condition</div>
<input type='checkbox' name='condition[]' value='New'><label for='condition'>New</label><br /> </div>
<hr />
<div id="filterContentResults">
<div id="filterContentCat">Color</div>
<input type='checkbox' name='color[]' value='Stainless Steel'><label for='color'>Stainless Steel</label><br /><input type='checkbox' name='color[]' value='Black'><label for='color'>Black</label><br /><input type='checkbox' name='color[]' value='Biscuit'><label for='color'>Biscuit</label><br /> </div>

Answer 1

What you can do is bind into the jQuery change event on the input.
When the inputs are changed, you can then update the query that is being sent (presumably with Ajax) to the PHP script
$("input").change(function() {
updateProductList($(this).attr("id"), $(this).prop("checked"));
});
function updateProductList(field, state) {
// Do Work
$.ajax({
source: "my-url.php?" + field + "=" + state
});
}
Note: the example is simplified, but hopefully you get the idea.