Checkbox submit javascript

Question

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 = $(".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");
   });

Answer 1

All checked data-ids in cat_id attribute: http://jsfiddle.net/NVQHK/2/

HTML

<ul>
    <li><input type="checkbox" value="product_category_1" data-id="1" />Tractors</li>
    <li><input type="checkbox" value="product_category_2" data-id="2" />Ride Ons</li>
    <li><input type="checkbox" value="product_category_3" data-id="3" />Machinery</li>
    <li><input type="checkbox" value="product_category_4" data-id="4" />Outdoor equipment</li>
</ul>

<input type="button" id="btn" value="Grab data" />
<div id="result"></div>

Javascript

window.onload = function(){
    document.getElementById('btn').addEventListener('click', function(){
        console.log(grabData(true));
        document.getElementById('result').innerText = JSON.stringify(grabData(true));
    });
}

function grabData(checked){
    checked = typeof(checked) == 'undefined' ? false : checked
    var items = document.getElementsByTagName('input');
    var data  = [];

    for(var i = 0; i < items.length; i++){
        if(items[i].type != 'checkbox' || items[i].checked != checked){
             continue;
        }

        data.push(items[i].getAttribute('data-id'));
    }

    var item = {
        id: 2,
        cat_id: data,
        state: checked + 0
    };

    return item;
}

Array of objects http://jsfiddle.net/NVQHK/3/

HTML

<ul>
    <li><input type="checkbox" value="product_category_1" data-id="1" />Tractors</li>
    <li><input type="checkbox" value="product_category_2" data-id="2" />Ride Ons</li>
    <li><input type="checkbox" value="product_category_3" data-id="3" />Machinery</li>
    <li><input type="checkbox" value="product_category_4" data-id="4" />Outdoor equipment</li>
</ul>

<input type="button" id="btn" value="Grab data" />
<div id="result"></div>

Javascript

    window.onload = function(){
    document.getElementById('btn').addEventListener('click', function(){
        console.log(grabData());
        document.getElementById('result').innerText = JSON.stringify(grabData(true));
    });
}

function grabData(checked){
    checked = typeof(checked) == 'undefined' ? false : checked;
    var items = document.getElementsByTagName('input');
    var data  = [];

    for(var i = 0; i < items.length; i++){
        if(items[i].type != 'checkbox' || items[i].checked != checked){
             continue;
        }

        var item = {
            id: items[i].getAttribute('data-id'),
            cat_id: items[i].value,
            state: items[i].checked + 0
        };

        data.push(item);
    }

    return data;
}