如何在jQuery中获取选中的复选框表值

Question

在我的表中，我有2行，请查看我的屏幕截图 ，假设我单击“第一个”复选框意味着我想在jquery中使用id **和** to_area值，该怎么做，我试过但无法获得，请帮忙一

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

我猜测您需要选中其复选框的每个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

您还可以使用此小提琴 ：

在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

逐步处理：

1. 给td您需要一些类（ from-a和to-a ）；
2. 初始化一个空数组所有 （我们将在后面存放在里面的数据）;
3. 创建由复选框更改触发的功能
4. 在函数内部，您需要知道哪个复选框已更改，它的状态是什么，它属于什么tr ，最后是TO AREA和FROM AREA值。
5. 如果状态= 选中，我们将把这些值加到全部 （我们的小数据存储）中；
6. 如果状态= 未检查，我们将从所有数组中删除该值；
7. 最后，当我们完成通过按按钮选择和取消选择行的操作时，我们可以获得所选行的值。

 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> 

这只是基本概念，您可以对其进行修改以适合您的需求，如果遇到困难，我们将很乐意为您提供帮助。