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 Framework。我在表格中使用了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>

在复选框上获取ID

1 个答案: