如何从检查的所有表行中获取所有 id？答案

【问题标题】：How to get all the ids from all the table rows checked?如何从检查的所有表行中获取所有 id？
【发布时间】：2015-05-04 02:00:35
【问题描述】：

首先，我创建一个包含 n 行的表，每行都包含一个复选框。我需要从检查的所有行中获取所有 id。

<body>
    <table border='1' style='width:100%'>
            <tr id='1'><td>'hi'</td><td><input type='checkbox' /></td></tr>
            <tr id='2'><td>'hi'</td><td><input type='checkbox' /></td></tr>
            <tr id='3'><td>'hi'</td><td><input type='checkbox' /></td></tr>
            <tr id='4'><td>'hi'</td><td><input type='checkbox' /></td></tr>
    </table>
<button id='test'>Get Checked</button>
        </body>

这是我目前得到的：

<script>
$(document).ready(function() {
$('#test').click(function(){
var getID = $(':checkbox:checked').closest('tr').attr('id');
alert(getID);
});
});

</script>

但这只会给我一个 id。如果我选择很多行，我只会得到第一个选择的 id。我还需要将所有选择的 id 存储在一个数组中以供以后使用。

【问题讨论】：

首先，验证你的HTML，表格结构不正确..所有元素都应该在<td></td>元素内

标签： javascript jquery html

【解决方案1】：

为此使用 jQuery 的 each 函数。

$(':checkbox:checked').each(function( index ) {
  var closestTr = $(this).closest('tr').attr('id');
  alert(closestTr);
});

【讨论】：

【解决方案2】：

在 jQuery 中，使用选择器默认为第一个。所以，我们应该使用each 获取所有选择器元素。

<script>
   $(document).ready(function() {
       $('#test').click(function(){
            var arrId = [];
            $(':checkbox:checked').each(function(){
                 var id = $(this).closest('tr').attr('id');
                 arrId.push(id);
            })
            console.log(arrId);
       });
   });
</script>

【讨论】：

【解决方案3】：

var getID = $(':checkbox:checked').closest('tr').attr('id');

应该是：

var getID = $('.checkbox:checked').closest('tr').attr('id');

【讨论】：

【解决方案4】：

尝试这样的事情，在fiddle 中进行演示。确保在每个输入复选框之前添加 open td

JS

$('#test').click(function(){
  var ids = $(':checkbox:checked').map(function() {
    var id = $(this).closest('tr').prop('id');
      alert(id);
      return id;
  }).get();
  alert(ids);
});

HTML

<table border='1' style='width:100%'>
  <tr id='1'><td>'hi'</td><td><input type='checkbox' /></td></tr>
  <tr id='2'><td>'hi'</td><td><input type='checkbox' /></td></tr>
  <tr id='3'><td>'hi'</td><td><input type='checkbox' /></td></tr>
  <tr id='4'><td>'hi'</td><td><input type='checkbox' /></td></tr>
</table>
<button id='test'>Get Checked</button>

【讨论】：

【解决方案5】：

把和id放在你的桌子上：

 <table id="myTab" border='1' style='width:100%'>

为避免在页面中出现其他复选框，请从表格中选择复选框，例如：

var ids = [];
$('#mytab :checkbox:checked').each(function( index ) {
    var closestTr = $(this).closest('tr').attr('id');
    ids.push(closestTr);
});
alert(ids);

【讨论】：