在复选框上获取 id

Question

我有这样的html代码。

HTML

<div class="container" style="padding-top: 30px; padding-bottom: 30px; width: 1089px;">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">

            <div class="fresh-table toolbar-color-orange">
            <!--    Available colors for the full background: full-color-blue, full-color-azure, full-color-green, full-color-red, full-color-orange                  
                    Available colors only for the toolbar: toolbar-color-blue, toolbar-color-azure, toolbar-color-green, toolbar-color-red, toolbar-color-orange
            -->

                <div class="toolbar">

                  <button id="selectAll" class="btn btn-default" style="padding-right:70px;">Select All</button>

                    <button id="popup" onclick="div_show()" class="btn btn-default" style="margin-left: 650px;">Send</button>
                </div>

                <table id="fresh-table1" class="table1">
                    <thead>
                       <tr>   
                       <th></th>  
                          <th data-field="id" data-sortable="true">ID</th>
                        <th data-field="name" data-sortable="true">First Name</th>
                        <th data-field="salary" data-sortable="true">Last Name</th>
                        <th data-field="country" data-sortable="true">Date Of Birth</th>
                        <th data-field="city">Gender</th>
                        <!-- <th data-field="actions" data-formatter="operateFormatter1" data-events="operateEvents1">Actions</th> -->
   </tr>           
                    </thead>

                    <tbody>
                            <tr>
                          <?php  
                          foreach ($user->result_array () as $row ) {?>

                          <td><input type="checkbox"></td>
                              <td><?php  echo $row['user_id'];?></td>
                                <td><?php  echo $row['firstname'];?></td>
                                <td><?php  echo $row['lastname'];?></td>
                                <td><?php  echo $row['dob'];?></td>
                                 <td><?php if($row['gender']==1){ echo                        'Male';}else{echo 'Female';}?></td> 

                            </tr>           
   <?php }?>                          
                    </tbody>
                </table>
            </div>             
        </div>
 </div>
    </div>

我的 javascript 就是这样。

Javascript

  <script>

    $(document).ready(function () {
    $('body').on('click', '#selectAll', function () {

    if ($(this).hasClass('allChecked')) {
        $('input[type="checkbox"]', '#fresh-table1').prop('checked', false);
    } else {
        $('input[type="checkbox"]', '#fresh-table1').prop('checked', true);
    }
    $(this).toggleClass('allChecked');
  })
});

我正在使用 Codeigniter 框架。我在表格中使用了 javascript。我 想在选择按钮上获得user_id，以便我可以将通知发送到选定的 ID。我想要数组格式的user_id。

Answer 1

:checkbox:checked 选择器和map 创建一个 user_ids 数组：

下面是工作演示：

function getAllCheckedUserIds() {
  var userIds = $('input:checkbox:checked').map(function() {
    return $(this).parent().next().text();
  }).get();
  var userIds = userIds.filter(function(v) {
    return v !== ''
  });
  console.log(userIds);
  return userIds;
}

$(document).ready(function() {
  $('body').on('click', '#selectAll', function() {
    if ($(this).is(":checked")) {
      $('input[type="checkbox"]', '#fresh-table1').prop('checked', true);
      getAllCheckedUserIds();
    } else {
      $('input[type="checkbox"]', '#fresh-table1').prop('checked', false);
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="selectAll" type='checkbox' class="allChecked" /> select All

<table id='fresh-table1'>
  <tr>
    <td><input type='checkbox' /></td>
    <td>User id: 1</td>
  </tr>
  <tr>
    <td><input type='checkbox' /></td>
    <td>User id: 2</td>
  </tr>
</table>