0

我有一个 id 的提交按钮，brands_by_category_change_name_btn单击时运行下面的 JS。问题是Object {id: 2, cat_id: 1, state: "0"}无论我的复选框是选中还是未选中，我都会得到相同的响应。

复选框代码

<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 如何将所有选中的复选框选项添加到我的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");
   });
4

1 回答 1

3

cat_id 属性中所有检查的数据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;
}
于 2013-09-20T04:39:58.827 回答