Question

如何在jQuery中单击按钮时获取复选框选中的属性ID。

当我选中复选框2并单击按钮时，我有一个带有属性ID和按钮的复选框列表我应该获得属性ID 2，依此类推。

html代码

<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

在您的按钮上附加点击处理程序，然后使用:checked代码段选中已选中的复选框。然后map结果返回id值，最后调用toArray方法。这是工作代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

2 个答案: