jquery 使用数组中的值自动选中复选框

Question

我有一个table像这样

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>age</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>431</td>
      <td>Ana</td>
      <td>22</td>
      <td><input type="checkbox" name="action[]" class="checkboxes" /></td>
    </tr>
    <tr>
      <td>123</td>
      <td>tom</td>
      <td>21</td>
      <td><input type="checkbox" name="action[]" class="checkboxes" /></td>
    </tr>
  </tbody>
</table>

我有一个 jquery 数组，其中存储了这些行示例的一些 ID

id= [123,431,213] 我想要的是当我的页面加载数组内的 id 时已经检查

$(document).ready(function () {
//code

});

我不知道该怎么做任何帮助都会有帮助

Answer 1

遍历 table 正文中的每一行，并为每一行获取第一个单元格的文本值，并检查您的数组是否包含它。

const arr = [ 431, 123, 888 ];

// Iterate over the rows
$('tbody tr').each((i, el) => {
  
  // Grab the first cell's text and coerce it to a number
  const number = Number($(el).find('td').first().text());

  // If the value is in the array
  if (arr.includes(number)) {

    // Find the input and check it
    $(el).find('input[type="checkbox"]').prop('checked', 'checked');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>age</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>431</td>
      <td>Ana</td>
      <td>22</td>
      <td><input type="checkbox" name="action[]" class="checkboxes" /></td>
    </tr>
    <tr>
      <td>124</td>
      <td>Bob</td>
      <td>23</td>
      <td><input type="checkbox" name="action[]" class="checkboxes" /></td>
    </tr>
    <tr>
      <td>123</td>
      <td>tom</td>
      <td>21</td>
      <td><input type="checkbox" name="action[]" class="checkboxes" /></td>
    </tr>
  </tbody>
</table>

Answer 2

var ids = ['431', '132'];
$( document ).ready(function() {
    $('td.id').each(function( index ) {
       if (ids.includes($(this).text())){
          $( "input.checkboxes" ).eq( index ).prop( "checked", true );
         }
    });
});

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


<table>
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>age</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="id">431</td>
      <td>Ana</td>
      <td>22</td>
      <td><input type="checkbox" name="action[]" class="checkboxes" /></td>
    </tr>
    <tr>
      <td class="id">123</td>
      <td>tom</td>
      <td>21</td>
      <td><input type="checkbox" name="action[]" class="checkboxes" /></td>
    </tr>
  </tbody>
</table>

jquery 使用数组中的值自动选中复选框

jquery automatically check checkbox with values in array

javascript

datatable

jquery