Question

我有一个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");
   });

Answer 1

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;
}

复选框提交JavaScript

1 个答案: