javascript - 循环中的表仅选择选中复选框的 td

Question

我试图做到这一点，以便当用户选择一个复选框然后点击一个按钮(下面的代码中未显示)时，他们将被重定向到一个新页面，其中包含某些详细信息。我需要为此获取 asset.id 值。我的问题是，我不确定从哪里开始获取这些值并使其与 submit 按钮一起使用。

HTML

<thead>
  <tr>
    <th>Select</th>
    <th>Model</th>
    <th>Asset Number</th>
    <th>Warranty</th>
    <th>Notes</th>
    <th>Actions</th>
 </tr>
</thead>
<tbody>

   {%  for asset in assets  %}
      <tr>
       <td><input type="checkbox"/></td>
       <td>{{asset.model}}</td>
       {% if loop.first %}<td class="tour-step tour-step-sixteen"><a href="/dashboard/it/asset/{{asset.id}}">{{ prefix }}{{asset.assetNumber}}</a></td>
       {% else %}
       <td><a href="/dashboard/it/asset/{{asset.id}}">{{ prefix }}{{asset.assetNumber}}</a></td>
       {% endif %}
        <td>{{asset.warranty | date("y-m-d")}}</td>
        <td>{{asset.notes}}</td>
        <td>
           <form id="label-form" action="/dashboard/it/label/print" method="POST">
            <button type="submit" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
           </form>
         </td>
      </tr>
    {% endfor %}

 </tbody>

我还没有 JS，因为我不确定如何开始获取我需要的值以及如何将它们保存/传递到我的 POST 路由上。即使是指导也很棒。

我现在已经花了 3.5 个小时在网上查找，但我发现没有一个解决方案似乎是完整的，它们都缺少一些东西，或者是针对单个值而不是像我需要的多个值。

Answer 1

您可以循环表 tr 并获取那些选中了复选框的 id。

提交表单时，可以调用该函数，获取数组y并将该数组传入服务器。

这只是一个简单的示例，现在您可以随意使用代码

getSelected = function(){
  var array = [];
  $('#my_table tbody tr').each(function(index, object){
    if($(this).find('input[type="checkbox"]').prop("checked"))
      array.push($(this).find('.id').html());
  });
  console.log(array);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my_table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Value</th>
        <th></th>
      </tr>
    </thead>
		<tbody>
			<tr>
				<td class="id">1</td>
				<td>Hola</td>
				<td><input type="checkbox"></td>
			</tr>
			<tr>
				<td class="id">2</td>
				<td>Como</td>
				<td><input type="checkbox"></td>
			</tr>
			<tr>
				<td class="id">3</td>
				<td>Stas</td>
				<td><input type="checkbox"></td>
			</tr>
		</tbody>
	</table>
  <button onclick="getSelected()"> Get Selected </button>