如何在jquery中获取复选框表值 [英] How to get checked checkbox table value in jquery

问题描述

在我的表格中我有2行请看我的屏幕截图，假设我点击第一个复选框意味着我想在jquery中获取 id **和** to_area 值如何做到这一点，我试过但我无法得到请帮助一些

In my table I have 2 rows please see my screen shot,suppose I click first check box means I want to take that id ** and **to_area value in jquery how can do this,I tried but I can not get please help some one

$(document).ready(function() {
  $('#chemist_allotment_btn').click(function() {
    if ($('#chemist_allotment_form').valid()) {
      $.ajax({
        url: 'update_chemist_bulk_transfer.php',
        type: 'POST',
        data: $('form#chemist_allotment_form').serialize(),
        success: function(data) {
          var res = jQuery.parseJSON(data); // convert the json
          console.log(res);
          if (res['status'] == 1) {
            var htmlString = '';
            $.each(res['data'], function(key, value) {
              htmlString += '<tr>';
              htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
              htmlString += '<td>' + value.id + '</td>';
              htmlString += '<td>' + value.name + '</td>';
              htmlString += '<td>' + value.area + '</td>';
              htmlString += '<td>' + value.to_area + '</td>';
              htmlString += '<td>' + value.address + '</td>';
              htmlString += '</tr>';

            });
            $('#SampleDT tbody').empty().append(htmlString);


            $('#get_to_area').click(function() {
              var id = $('input[name=getchemist]:checked').val();
              if ($(".getchemist").prop('checked') == true) {
                alert(id);
                alert(value.to_area);
              } else {
                alert('Please Check');
              }
            });


          } else {
            $('#SampleDT tbody').empty().append('No Datas Found');
          }
        },
      });
      return false;
    }
  });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well white">
  <table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
    <thead>
      <tr>
        <th>Select</th>
        <th>Id</th>
        <th>Doctor Name</th>
        <th>From Area</th>
        <th>To Area</th>
        <th>Address</th>
      </tr>

    </thead>
    <tbody>


    </tbody>

  </table>

  <center>
    <div class="form-group">
      <button type="button" class="btn btn-primary" style="text-align:left;" id="get_to_area">Transfer Area</button>
    </div>
  </center>
</div>

推荐答案

首先，为每个< td> 添加课程，例如< td class ='id'> [您的id]< / td>

Firstly, add classes to each <td>, like <td class='id'>[Your id]</td>

同样适用于所有元素 doctor-name ， to-area 等，以及每个< tr> 的类，如行 - 选择

Similarly for all the elements doctor-name, to-area, etc and a class to each <tr> like row-select

有点像这样：

<tr class="row-select">
  <td class="select">...</td>
  <td class="id">...</td>
  <td class="to-area">...</td>
  .
  .
  .
</tr>

像这样使用jQuery：

Use jQuery like this:

$('.row-select').click(function(){
    var id,toArea,checkBox;
    id = $(this).find('.id').html(); //get the ID field
    toArea = $(this).find('.to-area').html(); //get the to-area field
    checkBox = $(this).find('.select > input');
    checkbox.prop('checked',!checkbox.prop('checked'));
})

此代码将为您提供无价值的信息，您可以点击该行，同时反转选择复选框

This code will get you he value no mater where you click on the row, and also invert the selection on the checkbox

要在提交表单时获取所选行的值，请运行此类循环

To get the values of rows selected when the form is submitted run a loop like this

$('.row-select input:checked').each(function(){
        var id,toArea,checkBox;
        id = $(this).closest('tr').find('.id').html(); //get the ID field
        toArea = $(this).closest('tr').find('.to-area').html(); //get the to-area field
})

编辑

所有在一起：

$(document).ready(function() {

  $('#btnSubmit').click(function() {

    $('.row-select input:checked').each(function() {
      var id, name;
      id = $(this).closest('tr').find('.id').html();
      name = $(this).closest('tr').find('.name').html();

      alert('ID: ' + id + " | Name: " + name);
    })

  })


  $('#btnSelectAll').click(function() {

    $('.row-select input').each(function() {
      $(this).prop('checked', true);
    })

  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr class="row-select">
    <td class="check">
      <input type="checkbox" />
    </td>
    <td class="id">12</td>
    <td class="name">Jones</td>
  </tr>

  <tr class="row-select">
    <td class="check">
      <input type="checkbox" />
    </td>
    <td class="id">10</td>
    <td class="name">Joseph</td>
  </tr>
</table>
<button id="btnSelectAll">Select all</button>
<button id="btnSubmit">Get Value</button>

这篇关于如何在jquery中获取复选框表值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！