javascript - jQuery 循环复选框

Question

我有一个包含许多复选框的页面。有一组复选框的 ID 前缀为 pbfam_，我只对这些复选框感兴趣。

当用户单击其中一个时，我需要从仅检查的 ID 子集中获取 ID 列表，并且我需要它是 ID 的逗号分隔字符串。

HTML 看起来像这样:

<input type="checkbox" id="pdfam_711131" />
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label>
<br />
<input type="checkbox" id="pdfam_711341" />
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label>
<br />

大约有 40 个这样的复选框。我正在寻找的是一个像这样的字符串:

“pdfam_711131，pdfam_711341”

我尝试过各种方法，但都没有效果。我对 jQuery 很陌生。这给了我一个已检查的列表，并在警报中返回已检查的值，我试图解决这个问题，但我一无所获。

$('input:checkbox[id^="pdfam_"]:checked').each(function(){alert($(this).attr("id")););

Answer 1

一个简单的方法是使用 .map() 生成 ID 数组，然后使用 .toArray().join(", ") 获取你的字符串。

var s = $('input:checkbox[id^="pdfam_"]:checked')
  .map(function(i, el) { return el.id })
  .toArray()
  .join(", ");
  
console.log(s);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" checked id="pdfam_711131" />
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label>
<br />
<input type="checkbox" checked id="pdfam_711341" />
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label>
<br />