取所选复选框的值

Question

通过一个按钮，我打算使用复选框的值来编辑数据库中的一行。

我的代码组织如下。首先，我开始创建这样的表：

HTML:

<table id="tabfor" class="table">
<thead> 
<tr> 
<th class="table__heading"><FONT COLOR="#ffffff"><i class="fa fa-pencil" aria-hidden="true"></FONT></i></th>
<th class="table__heading"><FONT COLOR="#ffffff">Registo</FONT></th>
<th class="table__heading"><FONT COLOR="#ffffff">Fornecedor</FONT></th>
<th class="table__heading"><FONT COLOR="#ffffff">Nif</FONT></th>
<th class="table__heading"><FONT COLOR="#ffffff">Contato</FONT></th>
<th class="table__heading"><FONT COLOR="#ffffff">Morada</FONT></th> 
<th class="table__heading"><FONT COLOR="#ffffff">Postal</FONT></th>
<th class="table__heading"><FONT COLOR="#ffffff">Email</FONT></th>
<th class="table__heading"><FONT COLOR="#ffffff">Colaboorador</FONT></th>
</tr>
</thead>
<tbody>
</tbody>
</table> 

我动态创建表：

$.getJSON('perfilfor.php', function (data) {
$('#tabfor').dataTable().fnDestroy();
var linha = ``; 
for (var i = 0; i < data.length; i++) { 
Id = data[i][0];
DataRegisto = data[i][1];
Fornecedor = data[i][2];
Nif = data[i][3];
Contato = data[i][4];
Morada = data[i][5];
Postal = data[i][6];
Email = data[i][7];
Nome = data[i][8];

linha += `<tr class="table__row">
<td  class="table__content" data-heading="Atualizar"><input type="checkbox" name="update" id="update" value="${ Id }"></td>     
<td class="table__content" data-heading="Registo"><FONT COLOR="#ffffff">${ DataRegisto }</FONT></td> 
<td class="table__content" data-heading="Nome"><FONT COLOR="#ffffff">${ Fornecedor }</FONT></td>
<td class="table__content" data-heading="Nif"><FONT COLOR="#ffffff">${ Nif }</FONT></td>
<td class="table__content" data-heading="Contato"><FONT COLOR="#ffffff">${ Contato }</FONT></td> 
<td class="table__content" data-heading="Morada"><FONT COLOR="#ffffff">${ Morada }</FONT></td>
<td class="table__content" data-heading="CEP"><FONT COLOR="#ffffff">${ Postal }</FONT></td> 
<td class="table__content" data-heading="Email"><FONT COLOR="#ffffff">${ Email }</FONT></td>
<td class="table__content" data-heading="Colaborador"><FONT COLOR="#ffffff">${ Nome }</FONT></td>       
</tr>`; 
}
$("#tabfor tbody").html(linha);
});

在第一个td的这个表中，我创建了一个输入checkbox来获得我想要编辑的行的id。

现在我创建了一个按钮来编辑如下：

<button href="s7" class="btn btn-warning caixa btn-show close-sidebar upd_forn" data-element="#minhaDiv6" style="float:right;"><i class="fa fa-pencil-square fa-5x taman" aria-hidden="true"></i>
<br>
<h4>Editar</h4>
<h4>Fornecedor</h4>
</button>

现在，在js中，我打算使用我在上一个表中创建的复选框值。我正在尝试这种方式：

$(document).on('click', '.upd_forn', function(){ 
var updf = $("#update").is(":checked") ? $("#update").val() : '';
$.ajax({  
url:"updforn.php",  
method:"POST",
cache: false,               
data:{updf:updf},               
dataType:"json",  
success:function(data){

for (var i = 0; i < data.length; i++) { 

Id = data[i][0];
Fornecedor = data[i][1];
Nif = data[i][2];
Contato = data[i][3];
Morada = data[i][4];
Postal = data[i][5];
Email = data[i][6];
Colaborador = data[i][7];

$('#Idf').val(Id);
$('#Fornecedor1').val(Fornecedor);
$('#Nif2').val(Nif);
$('#Contato2').val(Contato);
$('#Morada2').val(Morada);
$('#Postal2').val(Postal);
$('#Email3').val(Email);
$('#minhaDiv6').show();
$('#minhaDiv1').hide();
}
}
});
});

但是通过这种方式，如果您选中从数据库表返回的第一行的复选框，它只返回值。选择另一行不再返回行id。

Answer 1

我使用querySelector解决了我的问题，它以这种方式获取所选无线电输入的id。

完整代码：

var updf = document.querySelector('input[name="update"]:checked').value;