选中标题复选框时获取每个选中行的特定单元格值答案

【问题标题】：Get particular cell value for each checked row when header check box checked选中标题复选框时获取每个选中行的特定单元格值
【发布时间】：2018-05-10 06:44:30
【问题描述】：

我有 gridview 有标题复选框并且每行都有复选框.. 当我点击标题复选框时，我需要检查子复选框是否被选中，如果选中，我需要获取所有选中行的第三个单元格值..

为此，我正在执行以下 Javascript 函数：

 function toggleSelection(source) {
    $("#MainContent_gvCG input[id*='chkCert']").each(function (index) {
        if(source.checked) {
            if (this.checked) {

               ////Here i need to access the third cell values of all rows

            }
        }
    });
}

示例表格格式（便于理解）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
 </script>
 <table border="1">
  <tr>
    <th>CFS Name</th>
    <th>Amount</th>
    <th>TCFSA</th>
    <th>CODEX</th>
    <th><input type="checkbox" id="chkHeader"/></th>
  </tr>
  <tr>
    <td>TRANSWORLD GLS INDIA</td>
    <td>Abc</td>
    <td>cg</td>
    <td>de</td>
    <td><input type="checkbox" class="chkCert"></td>
  </tr>
  ................
  ...............
  ..............
  </table>

这是我的网格视图：

     <asp:GridView ID="gvPRCertInfo" runat="server" AutoGenerateColumns="False" GridLines="None"                     
           OnRowDataBound="gvPRCertInfo_RowDataBound"
            CssClass="data responsive">
             <Columns>
                <asp:TemplateField HeaderText="Select" SortExpression="">
                 <HeaderTemplate>
                   <asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" onclick="toggleSelection(this);"  OnCheckedChanged="chkboxSelectAll_CheckedChanged"/>
                     </HeaderTemplate>
                       <ItemTemplate>
                        <asp:CheckBox ID="chkCert" AutoPostBack="true" OnCheckedChanged="chkCert_CheckedChanged"  runat="server" />                                    
                         <input type="hidden" id="hdnCertId" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "CertId") %>' />
                       </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="CertificateID" HeaderText="Certificate ID" HeaderStyle-HorizontalAlign="Center" />
         ....................
         .....................
         ..............
       </Columns>                            
   </asp:GridView>

任何人都可以就如何访问所有选中行的第三个单元格值提出任何想法..除此之外的任何更好的解决方案也欢迎。

修改代码：

function toggleSelection(source) {
    $('#<%= gvPRCertInfo.ClientID %> input[id*="chkCert"]').each(function () {
            if (source.checked) {
                alert("source checked");
                if (this.checked) {
                    alert("child chk");
                    var allVlues = $(this).closest('tr').children('td:eq(4)').html();
                    alert(allVlues);

                }
            }
        });
    }

我无法发出此警报 alert("child chk"); ，谁能帮忙解决这个问题..

【问题讨论】：

$(this).prev().prev(); 将选择第三个 td。然后使用.text() 获取其中的内容。
建议在您的控制台中玩耍。 console.log(this) 是什么？如果您将window.AA = this; 之类的操作作为函数的第一行，那么您可以在控制台中访问AA（即最后一个函数调用中的this），并查看您假设的条件不是案例。
使用 $("#MainContent_gvCG input[id*='chkCert']:checked") ，这只会遍历选中的复选框，因此您不必使用 if (this.checked)
是您提供的示例表格式，因为我可以在其中看到 class="chkCert" 而不是 id。更新正确的示例表

标签： javascript jquery html asp.net html-table

【解决方案1】：

如果您可以将此视为一个简单的仅限客户端的数据收集，那么请选择您想要的。一个例子：

var $thirdCell = $(this).parent().children(':nth-child(3)');
console.log('Text: ', $thirdCell.text());
console.log('HTML: ', $thirdCell.html());

根据“值”的含义，您可以获取文本或 HTML。

【讨论】：

能否请您查看我已更新代码的问题.. 我无法发出该警报
我无法进入这个 if 循环 if (this.checked) { alert("child chk"); ....这个检查是针对每一行复选框..我怎么能进入这个..你有什么想法
对。正如我在上面的评论中所问的，this 的价值是什么？你有什么保证你的功能正在执行？

【解决方案2】：

试试$(this).parent().parent().find('td:eq(2)').text();。还要注意$("#MainContent_gvCG input.chkCert:checkbox").each(....的变化

function toggleSelection(source) {
  $("#MainContent_gvCG input.chkCert:checkbox").each(function (index) {
      if(source.checked) {
          if (this.checked) {
             let thirdVal = $(this).parent().parent().find('td:eq(2)').text();
       console.log(thirdVal);
          }
      }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="MainContent_gvCG" >
  <tr>
    <th>CFS Name</th>
    <th>Amount</th>
    <th>TCFSA</th>
    <th>CODEX</th>
    <th><input type="checkbox" id="chkHeader" onclick="toggleSelection(this);"/></th>
  </tr>
  <tr>
    <td>TRANSWORLD GLS INDIA</td>
    <td>Abc</td>
    <td>cg</td>
    <td>de</td>
    <td><input type="checkbox" class="chkCert"></td>
  </tr>  
  <tr>
    <td>Test</td>
    <td>mnl</td>
    <td>opq</td>
    <td>xyz</td>
    <td><input type="checkbox" class="chkCert" checked></td>
  </tr>
</table>

【讨论】：