获取选定复选框属性的数组[重复]

Posted 2023-05-09

【中文标题】获取选定复选框属性的数组[重复]

【英文标题】：Getting array of selected checkbox attributes [duplicate]

【发布时间】：2017-12-22 02:01:40

【问题描述】：

在我目前正在处理的 Web 应用程序中，有很多地方有许多 html 复选框，我需要将这些复选框转换为选定项目的 JS 数组。例如：

<input type="checkbox" class="example" data-item="3">
<input type="checkbox" class="example" data-item="5">
<input type="checkbox" class="example" data-item="7">
<input type="checkbox" class="example" data-item="11">

然后我有很多这样的逻辑将选定的值打包到一个数组中：

var items = [];
$('.example[data-item]:checked').each(function (_, e) 
    items.push(Number($(e).data('item')));
);

我的问题是这样的：是否有一些好的方法可以在单行中做到这一点（如果需要，可以使用 jQuery），例如：

var items = /* magic */;

我意识到我可以为此编写一个函数，如果没有办法清楚地做到这一点，我会这样做，但我正在寻找一些可以一次完成所有事情的内置 JS 魔法。

---

为了完整起见，这里是一个 sn-p：

$('#button').click(function () 
  var items = [];
  $('.example[data-item]:checked').each(function (_, e) 
    items.push(Number($(e).data('item')));
  );
  alert(JSON.stringify(items));
);

label  display: flex; align-items: center; 
div  display: inline-flex; flex-direction: column; 
button  margin: 1ex; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" class="example" data-item="3"> Item 3</label>
<label><input type="checkbox" class="example" data-item="5"> Item 5</label>
<label><input type="checkbox" class="example" data-item="7"> Item 7</label>
<label><input type="checkbox" class="example" data-item="11"> Item 11</label>
<label><input type="checkbox" class="example" data-item="13"> Item 13</label>
<label><input type="checkbox" class="example" data-item="17"> Item 17</label>
<label><input type="checkbox" class="example" data-item="19"> Item 19</label>
<button id="button">Click Me</button>
</div>

【问题讨论】：

api.jquery.com/jquery.mapvar items = $('.example[data-item]:checked').map(function() return Number($(this).data('item')); ).get();

@Jason ... 检查这个小提琴jsfiddle.net/russcam/NxATD .. 来源是***.com/questions/6166763/…

@Shiladitya 哦，太棒了，太容易了。谢谢！

试试这个jsfiddle.net/jmc2wzt8/2

【参考方案1】：

我没有发现您的代码有任何问题，但另一种方法是使用 map() 并返回您需要的内容：

$('#button').click(function() 
  var items = $(".example[data-item]:checked").map(function() 
    return $(this).data('item');
  ).get();
  console.log(items);
);

label 
  display: flex;
  align-items: center;


div 
  display: inline-flex;
  flex-direction: column;


button 
  margin: 1ex;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label><input type="checkbox" class="example" data-item="3"> Item 3</label>
  <label><input type="checkbox" class="example" data-item="5"> Item 5</label>
  <label><input type="checkbox" class="example" data-item="7"> Item 7</label>
  <label><input type="checkbox" class="example" data-item="11"> Item 11</label>
  <label><input type="checkbox" class="example" data-item="13"> Item 13</label>
  <label><input type="checkbox" class="example" data-item="17"> Item 17</label>
  <label><input type="checkbox" class="example" data-item="19"> Item 19</label>
  <button id="button">Click Me</button>
</div>

【讨论】：

太棒了，我用var items = $.map($('.example[data-item]:checked'), (e) => +e.dataset.item); 让它更短了（刚刚从jquery multiple checkboxes array 发现了+ 技巧）。

【参考方案2】：

是的，您可以使用地图功能：

var tempValue=$('input:checkbox').map(function(n)
          if(this.checked)
                return  this.value;
              ;
       ).get().join(',');
   console.log(tempValue);

【参考方案3】：

const checkedItems = Array.from(document.querySelectorAll('[checked]')).reduce((items, el) => 
   // save whatever you want from the elmenent here
   items = items.concat(el)
   return items;
, [])