Jquery复选框选中获取attr id按钮点击

Question

如何在jQuery中单击按钮时获得复选框选中属性id。

我有一个带有属性id的复选框列表和一个按钮，当我检查复选框2并单击按钮时，我应该得到属性id 2等等。

小提琴

<div id="checkboxlist">
    <div><input type="checkbox" id="1" class="chk"> Value 1</div>
    <div><input type="checkbox" id="2" class="chk"> Value 2</div>
    <div><input type="checkbox" id="3" class="chk"> Value 3</div>
    <div><input type="checkbox" id="4" class="chk"> Value 4</div>
    <div><input type="checkbox" id="5" class="chk"> Value 5</div>
    <div>
        <input type="button" value="button" id="buttonClass">
    </div>
</div>

Answer 1

将click处理程序附加到按钮上，然后使用:checked snippet选择已选中的复选框。然后map返回id值的结果，最后调用toArray方法。下面是工作代码:

$("#buttonClass").on("click", function() {
  var checkedIds = $(".chk:checked").map(function() {
    return this.id;
  }).toArray();
  alert(checkedIds.join(", "));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxlist">
  <div>
    <input type="checkbox" id="1" class="chk">Value 1</div>
  <div>
    <input type="checkbox" id="2" class="chk">Value 2</div>
  <div>
    <input type="checkbox" id="3" class="chk">Value 3</div>
  <div>
    <input type="checkbox" id="4" class="chk">Value 4</div>
  <div>
    <input type="checkbox" id="5" class="chk">Value 5</div>
  <div>
    <input type="button" value="Delete" id="buttonClass">
  </div>
</div>

Answer 2

您可以使用 map() 来迭代并获得id，使用 get() 将其作为数组获取。

$('#buttonClass').click(function() {
  var ids = $(':checkbox:checked').map(function() {
    return this.id;
  }).get();
  $('#res').text(JSON.stringify(ids,null,3));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkboxlist">
  <div>
    <input type="checkbox" id="1" class="chk">Value 1</div>
  <div>
    <input type="checkbox" id="2" class="chk">Value 2</div>
  <div>
    <input type="checkbox" id="3" class="chk">Value 3</div>
  <div>
    <input type="checkbox" id="4" class="chk">Value 4</div>
  <div>
    <input type="checkbox" id="5" class="chk">Value 5</div>
  <div>
    <input type="button" value="button" id="buttonClass">
  </div>
</div>
<pre id="res"></pre>