查找每个选择复选框的第一个 td答案

【问题标题】：Find first td, of every select checkbox查找每个选择复选框的第一个 td
【发布时间】：2017-11-07 09:50:41
【问题描述】：

我有一张如下表：

<table id="testTable" class="mainTable">
    <thead>
        <tr>
            <th>Title</th>
            <th>
                Select All
                <input type="checkbox" id="select_all">
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 2</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 4</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
    </tbody>
</table>

目前，我的 JS 代码会从表格中获取所有第一个 td 元素，无论复选框如何，代码如下：

$("#testTable tr").each(function() {
    firsttd += $(this).find("td:first").html() + "\n";
});

但是，我需要对此进行修改，以便我的 JS 代码仅获取选中复选框行的第一个 td 元素。

【问题讨论】：

标签： javascript jquery html dom checkbox

【解决方案1】：

您可以直接在选择器上添加条件，例如：

$("#testTable :checkbox:checked").each(function() {
    firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});

或者，如果您真的需要循环，并且由于您使用的是 jQuery，您可以使用 .is(':checked') 之类的：

if ( $(this).find(':checkbox').is(':checked') ) 
{
     firsttd += $(this).find("td:first").html() + "\n";
}

希望这会有所帮助。

var firsttd = "";

$("#testTable :checkbox:checked").each(function() {
  firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});

console.log(firsttd);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="testTable" class="mainTable" border=1>
  <thead>
    <tr>
      <th>Title</th>
      <th>Select All <input type="checkbox" id="select_all"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td><input type="checkbox" class="checkbox" checked></td>
    </tr>
    <tr>
      <td>Cell 2</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td><input type="checkbox" class="checkbox" checked></td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
  </tbody>

【讨论】：

感谢@Zakaria，这正是我正在寻找的。只需选择该行的第一个 td，仅选中其复选框。

【解决方案2】：

这是你想要完成的吗？：

$("#testTable tr").each(function(){
    firsttd += $(this).find('input[type="checkbox"]:selected').parent().html()+"\n";
});

【讨论】：

感谢 3Dos 但不，基本上，如果选中该行的复选框，则找到该行的第一个 td

【解决方案3】：

您可以直接在 JQuery 选择器中使用 :checked 直接选择选中的复选框：

$('#testTable tr input[type="checkbox"]:checked').each(function(){
    firsttd += $(this).closest('tr').children().first().html()+"\n";
});

【讨论】：

【解决方案4】：

用$(this).find(':checkbox').is(':checked')试试这个代码

$(document).ready(function() {

  $(this).click(function() {
    var firsttd = "";
    $("#testTable > tbody > tr").each(function() {
      if ($(this).find(':checkbox').is(':checked'))
        firsttd += $(this).find("td:first").html() + "\n";

    });
    console.log(firsttd);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
  <thead>
    <tr>
      <th>Title</th>
      <th>Select All <input type="checkbox" id="select_all"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 2</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
  </tbody>

【讨论】：

【解决方案5】：

Find checkbox 检查它是否被选中，如果它在你的变量中找到它的父母第一个 td 值。

var firsttd = '';
$("#testTable tbody tr td").each(function() {
  if ($(this).find('input[type=checkbox]').is(":checked"))
    firsttd += $(this).parent('tr').find("td:first").html() + "\n"
});
console.log(firsttd);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
  <thead>
    <tr>
      <th>Title</th>
      <th>Select All
        <input type="checkbox" id="select_all">
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>
        <input type="checkbox" class="checkbox" checked='checked'>
      </td>
    </tr>
    <tr>
      <td>Cell 2</td>
      <td>
        <input type="checkbox" class="checkbox">
      </td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>
        <input type="checkbox" class="checkbox" checked='checked'>
      </td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>
        <input type="checkbox" class="checkbox">
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案6】：

获取选中复选框的第一个 td

var elems = $("#testTable tr td input[checked]");
var str = "";
for(var i=0;i<elems.length;i++){
  str += $(elems[i]).parent().parent().text()+"\n";
}
console.log(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
<thead>
  <tr><th>Title</th><th>Select All <input type="checkbox" id="select_all"></th></tr>
</thead>
<tbody>
  <tr><td>Cell 1</td><td><input type="checkbox" class="checkbox"></td></tr>
  <tr><td>Cell 2</td><td><input checked type="checkbox" class="checkbox"></td></tr>
  <tr><td>Cell 3</td><td><input checked type="checkbox" class="checkbox"></td></tr>
  <tr><td>Cell 4</td><td><input type="checkbox" class="checkbox"></td></tr>
</tbody>

【讨论】：

抱歉，我认为这不适用于多个选中的复选框..
@ZakariaAcharki ：回答它以获得选中复选框的第一个 td
我不认为 OP 要求什么，否则为什么循环和+= ...
@ZakariaAcharki：好的，明白了

【解决方案7】：

$(document).ready(function() {
  var firsttd = "";
  $("#testTable tr td input:checkbox:first-child:checked").each(function()   
  {
     firsttd += $(this).parent().parent().find("td:first").html() + "\n";
  });
  console.log(firsttd);
});

小提琴here

【讨论】：