checkbox submit javascript

Question

У меня есть кнопка отправки с идентификатором brands_by_category_change_name_btn, которая при нажатии запускается под JS. Проблема в том, что я получаю тот же ответ Object {id: 2, cat_id: 1, state: "0"} независимо от того, отмечены ли мои флажки или сняты флажки.

Checkbox Код

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

Использование JavaScript, как я могу добавить все мои проверяемые варианты CheckBox в мои cat_id переменные для обработки?

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

Все проверили данные идентификаторов в атрибуте cat_id: 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; 
} 

Массив объектов 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; 
}