[英]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 在我的表中,我有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>
I'm guessing you need values of each td
whose checbox are checked. 我猜测您需要选中其复选框的每个
td
的值。 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
. 正如你所看到的,代码遍历每个
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,....)
});
Firstly, add classes to each <td>
, like <td class='id'>[Your id]</td>
首先,将类添加到每个
<td>
,例如<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
同样,对于所有元素
doctor-name
, to-area
等,以及每个<tr>
的类,如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: 像这样使用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'));
})
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>
You can also use this fiddle : 您还可以使用此小提琴 :
In JS: 在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: 在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>';
});
td
you need some classes ( from-a & to-a ); td
您需要一些类( from-a和to-a ); tr
does it belong to and at the end what are the TO AREA and FROM AREA values. 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>
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.
这只是基本概念,您可以对其进行修改以适合您的需求,如果遇到困难,我们将很乐意为您提供帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.