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

我有一个HTML，如下所示：

<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-container-ajax-sorting').on('click', '.pgggo-list-taxon input', function(event) {
   var outputPgggo = $(this).attr('name');
}

---

但这只是牵线搭桥。有什么方法可以做到这一点吗？

我建议将ID存储在对象中，而不是使用数组数组。这样更容易相处。大概是这样的：

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

然后，您可以通过一些数组操作始终转换为所需的形式：

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

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

const数组={}；
$（'[name^=“pgggo-“]”）。在（'click'，function（）上{
常量[uu，分类法，uu，attr]=$（this.attr（'name'）.split（'-'）；
常量id=attr.split（'['）[0]；
const checked=$（this.prop（'checked'）；
数组[分类]=数组[分类]| |[]；
const index=array[taxonomy].indexOf（id）；
索引==-1？数组[taxonomy]。推送（id）：数组[taxonomy]。拼接（索引，1）；
console.log（数组）；
})；

发展


食物（类别）


食物（家庭）


医学的


未分类


WordPress

我建议将ID存储在对象中，而不是使用数组数组。这样更容易使用。类似如下：

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

然后，您可以通过一些数组操作始终转换为所需的形式：

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

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

const数组={}；
$（'[name^=“pgggo-“]”）。在（'click'，function（）上{
常量[uu，分类法，uu，attr]=$（this.attr（'name'）.split（'-'）；
常量id=attr.split（'['）[0]；
const checked=$（this.prop（'checked'）；
数组[分类]=数组[分类]| |[]；
const index=array[taxonomy].indexOf（id）；
索引==-1？数组[taxonomy]。推送（id）：数组[taxonomy]。拼接（索引，1）；
console.log（数组）；
})；

发展


食物（类别）


食物（家庭）


医学的


未分类


WordPress

您希望在一个数组中存储/发送选定的值，对吗？那么为什么要为每个复选框使用唯一的名称？！…如果它们属于一起，请按如下方式适当命名：

//....

然后，它们将在提交时自动作为数组发送，无需进一步重新排列……或者，如果您真的还想用ajax方式发送，您可以轻松获得类别复选框的所有ID，如下所示：

$（'[name=“pgggo category sep[]]”）。关于（'change'，函数（）{
让value=Array.from（$（'[name=“pgggo category sep[]”：选中'））
.map（元素=>$（元素）.val（））
})

您希望在一个数组中存储/发送选定的值，对吗？那么为什么要为每个复选框使用唯一的名称？！…如果它们属于一起，请按如下方式适当命名：

//....

然后，它们将在提交时自动作为数组发送，无需进一步重新排列……或者，如果您真的还想用ajax方式发送，您可以轻松获得类别复选框的所有ID，如下所示：

$（'[name=“pgggo category sep[]]”）。关于（'change'，函数（）{
让value=Array.from（$（'[name=“pgggo category sep[]”：选中'））
.map（元素=>$（元素）.val（））
})

你想在两个数组中都添加id吗：在第一个

类别

和第二个

主页

中？@Ivan Hi，不，实际上与

主页

相对应的数字变成了它的数组的id。你想使用jquery或phpOh来实现这一点吗？好的，我遗漏了一些东西，因为在yo中只有类别类型复选框ur html代码片段。@AmitSharma是的，Php也可以，但我需要传递选择中的数据，我认为唯一的方法是使用jquery获取。我在ajax函数中使用它。因此，可以使用phpDo处理它。您希望在两个数组中都添加ID：第一个

类别
，第二个数组
home
？@Ivan Hi，不，实际上，
home
对应的数字变成了它的数组id。如果您想使用jquery或phpOh进行此操作，好的，我遗漏了一些内容，因为您的html代码段中只有类别类型复选框。@AmitSharma是的，Php也可以，但我需要传递我选择的数据我认为唯一的方法是使用jquery。我在ajax函数中使用它。因此，如果您在取消选中后进行检查，则可以使用phpDuplicate条目处理它。在实现时，我遇到了一些问题。因为分类法是动态的，所以它不会是固定的。它可以是类别、主页或其他内容。此外，我使用的切片他做了2个位置。也可能有超过2个或1个位置的情况。有可能吗solution@GeekyOwl，我已更新我的答案，以便（1）动态填充对象；（2）没有重复项；（3）取消选中将从数组中删除该项。没问题@GeekyOwl，我在初始版本的基础上添加了第二个版本，我想你会发现它很有用。如果在取消选中后进行检查，则会重复条目。在实现时，我遇到了一些问题