如何从dataTable行集合中获取复选框输入值？答案

【问题标题】：How to get check box input value from dataTable row collection?如何从dataTable行集合中获取复选框输入值？
【发布时间】：2013-09-12 03:26:33
【问题描述】：

我有一个用作 jquery 数据表的表。每个数据行都有一个复选框列。该页面的访问者将单击复选框以选择要删除的项目。数据表启用了分页和过滤，因此访问者可以在不同页面上选择一个或多个复选框。当用户点击“删除”时，我希望能够抓取每个选中复选框的值。

我想出了如何使用以下方法将选中的行作为一个集合获取：var rowcollection = oTable.$(".call-checkbox:checked", {"page": "all"}); 我还没有想出的是如何遍历集合以获取每行复选框输入的值。

下面是脚本和表格。请告诉我，我遗漏了一些非常明显的东西。

<script type="text/javascript" charset="utf-8">
 $(document).ready(function () {
        $('#calltable').dataTable({
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bAutoWidth": true,
            "bStateSave": true,
            "aoColumnDefs": [
                { 'bSortable': false, 'aTargets': [ -1,0] }
            ]
        });

        // trashcan is the id of the icon users click to delete items 
        // onclick get all the checked rows and do something 
        $("#trashcan")
        .click(function () {

            var oTable = $('#calltable').dataTable();
            var rowcollection =  oTable.$(".call-checkbox:checked", {"page": "all"});
            for(var i = 0; i < rowcollection.length; i++)
            {
             //   GET THE VALUE OF THE CHECK BOX (HOW?) AND DO SOMETHING WITH IT.
             //   
            }
        });

        });
    </script>



<table id="calltable" class="pretty">
 <thead>
  <tr>
   <th><span id="check">Check</span> | 
      <span id="uncheck">U</span> | 
      <img src="/trash_16x16.gif" alt="Delete" id="trashcan" />
   </th>
   <th>phone</th>
   <th>name</th>
   <th>Status</th>
  </tr>
</thead>
<tbody>
  <tr>
   <td>
     <input type="checkbox" class="call-checkbox" value="22" />    
   </td>
   <td>8438740903</td>
   <td>Susan</td>
   <td>S</td>
  </tr>
  <tr>
    <td> 
      <input type="checkbox" class="call-checkbox" value="23" />
    </td>
    <td>9098983456</td>
    <td>Jack Sparrow</td>
    <td>S</td>
  </tr>
 </tbody>
</table>

【问题讨论】：

如果您的 rowcollection 包含复选框的 jQuery dom 节点，那么它非常简单：rowcollection[i].val();
太棒了。它的工作形式。我正在寻找几个月。

标签： jquery datatable

【解决方案1】：

使用 each 函数，而不是像这样的 for 循环：

var oTable = $('#calltable').dataTable();
var rowcollection =  oTable.$(".call-checkbox:checked", {"page": "all"});
rowcollection.each(function(index,elem){
    var checkbox_value = $(elem).val();
    //Do something with 'checkbox_value'
});

【讨论】：

非常感谢。我尝试了许多不同的解决方案，但这是正确的。非常感谢！

【解决方案2】：

这是动态添加到 jquery dataTable 的复选框。您将获得选中的复选框值。

 var table = $('#tblItems').DataTable({});

例子：

    $(document).on('click', '#btnPrint', function () {
        var matches = [];
        var checkedcollection = table.$(".chkAccId:checked", { "page": "all" });
        checkedcollection.each(function (index, elem) {
            matches.push($(elem).val());
        });


        var AccountsJsonString = JSON.stringify(matches);
        //console.log(AccountsJsonString);
        alert(AccountsJsonString);
    });

【讨论】：