jQuery从复选框获取复杂的多个选中值到数组答案

【问题标题】：jQuery get complex multiple checked values from checkbox to arrayjQuery从复选框获取复杂的多个选中值到数组
【发布时间】：2015-02-28 21:43:07
【问题描述】：

我想在选中复选框时动态显示与访问者选择相关的网站内容。在 Ajax 和 php 端发送信息没有问题。但我无法在 jQuery 中创建我想要的数组。

HTML：

<div id="filter">
    <div class="sizes">
        <input type="checkbox" data-group="size_catalog" data-value="32">
        <input type="checkbox" data-group="size_catalog" data-value="36">
        <input type="checkbox" data-group="size_catalog" data-value="38">
        <input type="checkbox" data-group="size_catalog" data-value="40">
    </div>
    <div class="colors">
        <input type="checkbox" data-group="color_catalog" data-value="red">
        <input type="checkbox" data-group="color_catalog" data-value="blue">
        <input type="checkbox" data-group="color_catalog" data-value="black">
    </div>
</div>

我想拥有多个数组的对象（需要对同一个数据组进行分组）：

var myArray = {size_catalog : ["32", "36", "38"], color_catalog: [red, blue]};

我当前创建一个简单数组的代码（在互联网上找到并改编）：

    function getChecked(){
        var opts= [];
        $checkboxes.each(function(){
            if(this.checked){
                opts.push(this.value);
            }
        });
        return opts;
    }

    function updateSearch(opts){
        $.ajax({
            type: "POST",
            url: "class.search.php",
            dataType : 'json',
            cache: false,
            data: {filterOpts: opts},
            success: function(records){
                ...
            }
        });
    }

    var $checkboxes = $("input:checkbox");
    $checkboxes.on("change", function(){
        var opts = getChecked();
        updateSearch(opts);
    });

    updateSearch();

感谢您的帮助！

【问题讨论】：

仅供参考，myArray 不是数组而是对象
var array = [] 应该是var opts = []？
@Barmar 是的，处理不当。我刚刚更正了。谢谢
@A.Wolff 我知道 javascript 中没有多维数组。正是出于这个原因，我加了引号。但你是对的。我会更正

标签： jquery arrays object checkbox

【解决方案1】：

您可以通过迭代和创建一个以 size-catalog 为键的对象和一个作为值推送的数组来实现。

var $checkboxes = $("input:checkbox");

$checkboxes.on('change', function() {
    var obj = {};

    $checkboxes.filter(':checked').each(function() {
        var n = $(this).data('group'),
            v = $(this).data('value');

        n in obj ? obj[n].push( v ) : obj[n] = [v];
    });

    $.post('class.search.php', {filterOpts: obj}, 'json').done(function(records) {

    });

});

FIDDLE

【讨论】：

非常感谢！这个社区真的很强大。
我尝试将 $.post 转换为 $.ajax 以添加 beforeSend 并加载 gif，但它不起作用。我犯错了吗？ $.ajax({ type: "POST", url: "ajax-search.php", dataType : 'json', data: {filterOpts: obj}, beforeSend: function(){ $('#displaycloth').text ('收费...'); }, }) .done(function(records){ $('#displaycloth').html(records) });

【解决方案2】：

那不是多维数组，那是一个包含 2 个不同数组的对象。如果你想要这样，那么你想要的是这样的：

function getChecked() {
  var sizeArray = [];
  var colorArray = [];

  $checkboxes.each(function() {
    if ($(this).is(':checked')) {
      if ($(this).data('group') == 'size_catalog')
        sizeArray.push($(this).data('value'));
      else if ($(this).data('group') == 'color_catalog')
        colorArray.push($(this).data('value'));
    }
  });

  return {
    size_catalog: sizeArray,
    color_catalog: colorArray
  };
}

Here is a working example

【讨论】：

感谢您花时间回答我。