on click pass all information

on click pass all information

I have a submit button with an id of brands_by_category_change_name_btn
that when clicked runs the below JS. The issue is that I am getting the
same response Object {id: 2, cat_id: 1, state: "0"} no matter if my
checkboxes are checked or unchecked.
Checkbox Code
<input type="checkbox" name="product_category"
class="product_category_selector" id="product_category_<?php echo
$assoc_cat['id']; ?>" data-id="<?php echo $assoc_cat['id']; ?>" <?php echo
$checked_state; ?> /> <?php echo $assoc_cat['name']; ?><br />
Using javascript how can I add all of my checked checkbox options into my
cat_id variable for processing?
JS
$('body').on("click", "#brands_by_category_change_name_btn", function (e) {
e.preventDefault();
var self = $(this);
var id = $("#manID").data("id");
var cat_id = new Array();
var cat_id = $(".product_category_selector").data("id");
var url = $("#manufacturers_table").data("infourl");
var state = "0";
if(self.is(":checked"))
{
state = "1";
}
var data_array = {
id : id,
cat_id : cat_id,
state : state
};
console.log(data_array);
//ajaxCall(url, data_array, null,
"reload_selected_product_categories");
});