Question

在我的表格中我有2行请see my screen shot，假设我点击第一个复选框表示我想在jquery中取 id **和** to_area 值如何做到这一点，我试过，但我不能得到请帮助一些

＆＃13;

$(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;
    }
  });
});

＆＃13;

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

＆＃13;

Answer 1

我猜你需要检查其checbox的每个td的值。这段代码应该让你开始。

正如您所看到的，代码循环遍历每个checkbox checked，在相应的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,....)
    });

Answer 2

首先，为每个<td>添加类，例如<td class='id'>[Your id]</td>

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

有点像这样：

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

像这样使用jQuery：

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

这段代码可以让你看到你点击行的价值，并且也会反复选中复选框

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

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

Answer 3

您也可以使用此fiddle：

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

在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>';

                                });

Answer 4

分步处理：

为td提供一些课程（从 - ＆amp; 到 - ）;
初始化一个空数组 all （我们稍后会将数据存储在其中）;
创建一个由复选框更改
在功能内部，您需要知道哪个复选框已更改，状态如何，tr属于哪个，最后 TO AREA 和 FROM AREA 值。
如果状态= 已选中，我们会将值添加到所有（我们的小型数据存储）;
如果州= 未选中，我们会从所有数组中删除该值;
最后，当我们通过按下按钮选择和取消选择行时，我们可以获得所选行的值。

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.com/jquery-3.1.0.js"></script>
</body>
</html>

这只是基本概念，您可以根据自己的需要进行修改，如果您遇到困难我会很乐意为您提供帮助。

如何在jquery中获取复选框表值

4 个答案:

分步处理：