Question

我有两组复选框，如下所示：

<ul id="searchFilter">
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="1">Toronto</li>
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="3">New York</li>
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="6">London</li>
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="5">Paris</li>
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="4">Berlin</li>
</ul>

        <ul id="searchFilter">
                    <li><input type="checkbox" name="price[]" class="cb_price" value="2"> $200,000 to $299,999</li>
                    <li><input type="checkbox" name="price[]" class="cb_price" value="3"> $300,000 to $399,999</li>
                    <li><input type="checkbox" name="price[]" class="cb_price" value="4"> $400,000 to $499,999</li>
                    <li><input type="checkbox" name="price[]" class="cb_price" value="5"> $500,000+</li>
                </ul>

我有这个jquery代码，它接受所选内容的值并放入opts数组中：

$(':checkbox').change(function() {
   var opts = $(":checkbox:checked").map(function() {
        return $(this).val();
    }).get(); 
    console.log(opts);
});

但是这将返回已复选复选框值的值，无论它们位于哪个复选框中，我的问题是如何保持这些分开，但在opts数组中，我正在寻找这些结果：

[位置[1,2,3]，价格[1,2,3]]

这是一个小提琴：http://jsfiddle.net/6zz5f/1/

Answer 1

要创建这样的复杂对象，您需要明确地构建它：

$(':checkbox').change(function () {
    var opts = {};
    $(":checkbox:checked").each(function () {
        var name = this.name;
        if (!opts[name]) opts[name] = [];
        opts[name].push(this.value);
    });
    console.log(opts);
});

http://jsfiddle.net/mblase75/Ttv3y/

结果如下：

{ location[]: [1,2,3], price[]: [4,5,6] }

如果需要，您可以从循环内的复选框名称中删除[]：

var name = this.name.substring(0,this.name.length-2);

Answer 2

如果复选框的集合足够小并且事先已知，则只需分别评估每个复选框：

function getValues(selector) {
    var $checked = $(':checkbox:checked');
    if (selector) {
        $checked = $checked.filter(selector);
    }

    return $checked.map(function() {
        return this.value;
    }).get();
};

$(':checked').on('change', function() {
    console.log({
        location: getValues('.cb_location'),
        price: getValues('.cb_price');
    });
});

Jquery在数组中创建数组

2 个答案: