javascript - How to get checked checkbox table value in jquery - Stack Overflow

admin管理员组

文章数量:1429399

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=".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>

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./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>

• javascript
• jquery

Share Improve this question Follow edited Nov 18, 2016 at 16:32 Ralf Bönning 15.5k66 gold badges5656 silver badges7171 bronze badges asked Nov 18, 2016 at 16:13 Sujini RSujini R 2911 gold badge11 silver badge55 bronze badges 1

• 2 Possible duplicate of How do I check if a checkbox is checked in jQuery? – Trasiva Commented Nov 18, 2016 at 16:14

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 0

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./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>

Process step-by-step:

1. Give the td you need some classes (from-a & to-a);
2. Initialize an empty array all (we'll store the data inside it later on);
3. Create a function that is triggered by the checkbox change
4. Inside the function you need to know which checkbox has changed, what's the state of it, what tr does it belong to and at the end what are the TO AREA and FROM AREA values.
5. If the state = checked we will add the values to the all (our small data storage);
6. If the state = not-checked we will remove the value from the all array;
7. Finally when we are done with selecting and deselecting rows by pressing the button we can get the values of the selected rows.

var all = [];

$('input[type="checkbox"]').change(function(){
  var checkbox = $(this);
  var state = checkbox.prop('checked');
  var tr = checkbox.parents('tr');
  var from = tr.children('.from-a').text();
  var to = tr.children('.to-a').text();
    
  if(state){
    all.push(from + ' -> ' + to);
  }else{
    var index = all.indexOf(from + ' -> ' + to);
    
    all.splice(index, 1);
  }
})

$('#get_to_area').click(function(){
  alert(all);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <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>
        <tr id="1">
          <td><input type="checkbox"></td>
          <td>1</td>
          <td>Nick</td>
          <td class="from-a">Kosur</td>
          <td class="to-a">Nath Pari</td>
          <td>Address</td>
        </tr>
        <tr id="2">
          <td><input type="checkbox"></td>
          <td>2</td>
          <td>John</td>
          <td class="from-a">Rusok</td>
          <td class="to-a">iraP htaN</td>
          <td>sserddA</td>
        </tr>
      </tbody>
    </table>

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

<script src="https://code.jquery./jquery-3.1.0.js"></script>
</body>
</html>

This is just the basic concept, you can modify it to suit your needs, I'll be happy to help you if you get stuck.

You can also use this fiddle:

In JS:

$('#get_to_area').click(function () {
    var id = $('input[name=getchemist]:checked').val();
if ($('input[name=getchemist]').is(':checked')) {
        var ID = $('input[name=getchemist]').parent().parent().siblings('td.chkid').html();
        var TO_Area = $('input[name=getchemist]').parent().parent().siblings('td.toarea').html();
    } 
    else {
    alert('Please Check');
    }
    });

In Html:

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 class="chkid">' + value.id + '</td>';
                                    htmlString += '<td>' + value.name + '</td>';
                                    htmlString += '<td>' + value.area + '</td>';
                                    htmlString += '<td class="toarea">' + value.to_area + '</td>';
                                    htmlString += '<td>' + value.address + '</td>';
                                    htmlString += '</tr>';

                                });

I'm guessing you need values of each td whose checbox are checked. This piece of code should get you started.

As you can see, Code loops through each checkbox which is checked, gets contents inside its corresponding td.

var Result = new Array();
    $('.checkbox-custom input[type="checkbox"]:checked').each(function(){
         var _this = $(this).closest('tr').find('td');
         var id= $(_this).eq(0);
         var name = $(_this).eq(1);
         ................... //Similar way for the others

         Result.Push(id,name,....)
    });

本文标签： javascriptHow to get checked checkbox table value in jqueryStack Overflow