jQuery将复选框选择转换为数组

Question

我有一个类似于这样的：

<div class="pgggo-list-taxon">
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-56[]">
            <div class="icon-box">
                <div name="development">Development</div>
            </div>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-14[]">
            <div class="icon-box">
                <div name="food">Food</div>
            </div>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-8[]">
            <div class="icon-box">
                <div name="medical">Medical</div>
            </div>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-1[]">
            <div class="icon-box">
                <div name="uncategorized">Uncategorized</div>
            </div>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-2[]">
            <div class="icon-box">
                <div name="wordpress">WordPress</div>
            </div>
        </label>
    </li>
</div>

每个复选框都有唯一的名称= pgggo-category-sep-56，pgggo-category-sep-14。单击多个项时，id将添加到下面数组的id字段中。

我正在尝试一种方法，它为我提供一个数组作为输出：

$output = array(
   array(
     'taxonomy'=> 'category', // pgggo-category-sep-56 --category word is pulled from here
     'id'=> array(56,14), // ids are pulled pgggo-category-sep-56 number at the end
    )
   array(
     'taxonomy'=> 'home', // pgggo-home-sep-56 --homeword is pulled from here
     'id'=> array(56,14), // ids are pulled pgggo-category-sep-56 number at the end
    )
);

我试过这个：

$('.pgggo-container-ajax-sorting').on('click', '.pgggo-list-taxon input', function(event) {
   var outputPgggo = $(this).attr('name');
}

但这只会拉绳子。有什么办法可以完成这件事吗？

Answer 1

我建议将I存储在一个对象中，而不是有一个数组。更容易相处。就像这样：

const array = {
  category: [],
  home: [],
};

然后，您可以通过一些数组操作将其转换为所需的表单：

Object.entries(array).map(([taxomony, id]) => ({taxomony, id}))

以下是单击复选框时更新对象的代码：

​

const array = {};

$('[name^="pgggo-"]').on('click', function() {
  const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
  const id = attr.split('[')[0];
  const checked = $(this).prop('checked');
  
  array[taxonomy] = array[taxonomy] || [];
  const index = array[taxonomy].indexOf(id);
  index == -1 ? array[taxonomy].push(id) : array[taxonomy].splice(index, 1);
  
  console.log(array);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pgggo-list-taxon">
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-56[]">
            <div class="icon-box">
                <div name="development">Development</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-14[]">
            <div class="icon-box">
                <div name="food">Food (category)</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-home-sep-14[]">
            <div class="icon-box">
                <div name="food">Food (home)</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-8[]">
            <div class="icon-box">
                <div name="medical">Medical</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-1[]">
            <div class="icon-box">
                <div name="uncategorized">Uncategorized</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-2[]">
            <div class="icon-box">
                <div name="wordpress">WordPress</div>
            </div>
        </label>
  </li>
</div>

​

或者，不必经历处理重复和状态的麻烦。只有当需要使用数组时，才能构造数组：

​

$('.sort-button').on('click', function() {

  const array = {};
  $('[name^="pgggo-"]').filter(':checked').each(function() {
    const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
    array[taxonomy] = array[taxonomy] || [];
    array[taxonomy].push(attr.split('[')[0]);
  });
  
  console.log(array);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pgggo-list-taxon">
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-56[]">
            <div class="icon-box">
                <div name="development">Development</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-14[]">
            <div class="icon-box">
                <div name="food">Food (category)</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-home-sep-14[]">
            <div class="icon-box">
                <div name="food">Food (home)</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-8[]">
            <div class="icon-box">
                <div name="medical">Medical</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-1[]">
            <div class="icon-box">
                <div name="uncategorized">Uncategorized</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-2[]">
            <div class="icon-box">
                <div name="wordpress">WordPress</div>
            </div>
        </label>
  </li>
</div>

<button class="sort-button">Show!</button> <!-- for demo purposes -->

​

Answer 2

您希望在一个数组中存储/发送选定的值，对吗？那么，为什么您对每个复选框都使用唯一的名称呢？！如果它们属于一起，那么将它们恰当地命名如下：

    <input type="checkbox" name="pgggo-category-sep[]" value="56">
    <input type="checkbox" name="pgggo-category-sep[]" value="14">
    <input type="checkbox" name="pgggo-category-sep[]" value="8">
    <input type="checkbox" name="pgggo-category-sep[]" value="1">
    <input type="checkbox" name="pgggo-category-sep[]" value="2">

    <input type="checkbox" name="pgggo-home-sep[]" value="foo">
    <input type="checkbox" name="pgggo-home-sep[]" value="bar">
    //....

然后它们将作为一个数组自动提交，不再需要重新排列.或者，如果您仍然想以ajax的方式完成这个任务，那么您可以很容易地获得这个类别的所有if -如下所示：

    $('[name="pgggo-category-sep[]"]').on('change', function () {
      let values = Array.from($('[name="pgggo-category-sep[]"]:checked'))
        .map(elem => $(elem).val())
    })