Sujini R Sujini R - 14 days ago 6
Javascript Question

How to get checked checkbox table value in jquery

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>




Answer

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

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

Somewhat like this:

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

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

EDIT

All together:

$(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>

Comments