找到每个选中复选框的第一个td

Question

我有一张表格如下：

FragmentTwo

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

<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元素。

Answer 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";
}

希望这有帮助。

＆＃13;

＆＃13;

var firsttd = "";

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

console.log(firsttd);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你想要完成的吗？ ：

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

Answer 3

您只需使用:checked

直接在JQuery选择器中选中已选中的复选框即可

#include <stdio.h>
#include <string.h>
#include <stdlib.h>

typedef struct node
{
   char name[20];
   int size;
   struct node *next;
}node;

node* head;


void reverse_nodes(node ** pphead)
{
   node *prev = NULL;
   node *current = *pphead;
   node *next;

   while (current != NULL)
   {
      next = current->next;
      current->next = prev;
      prev = current;
      current = next;
   }
   *pphead = prev;
}

void main(void)
{
   int i;
   node * phead;

   head = phead = (node *)malloc(sizeof(node));
   phead->size = 0;
   for (i = 0; i < 4; i++)
   {
      node * p;

      phead->next = (node *)malloc(sizeof(node));
      phead = phead->next;
      phead->size = i + 1;
      phead->next = NULL;
   }

   reverse_nodes(&head);

   phead = head;
   while (phead)
   {
      printf("%d\r\n", phead->size);
      phead = phead->next;
   }
}

Answer 4

获取已选中复选框的第一个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>

Answer 5

使用$(this).find(':checkbox').is(':checked')

尝试此代码

＆＃13;

＆＃13;

$(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);
  });

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

查找复选框检查是否已检查是否已检查其变量中的父亲第一个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>

Answer 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