2017-10-01 87 views
0

我有這樣的html代碼。獲取複選框上的ID

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'); 
    }) 
}); 

我使用笨框架。我在表格中使用了javascript。 I 想要在選擇按鈕上獲得user_id,以便我可以將通知發送到選定的ID。我想要數組格式的user_id

回答

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>

+0

獲得類型錯誤:this.parent不是一個函數錯誤 – kalpita

+0

您可以在函數中添加此代碼,並在需要的地方調用該函數。這應該返回一個user_id數組。在這個函數中,最後你應該有'return userIds' –

+0

@kalpita - 使用$(this).parent()在控制檯上沒有得到任何東西 –