检查是否选中了具有多个复选框的html表上的特定复选框。JS/JQuery
检查是否选中了具有多个复选框的html表上的特定复选框。JS/JQuery
提问于 2019-05-16 01:53:57
我有一个从数据库填充的表，我想检查每一行是否使用JS/JQuery选中了Enviar列上的复选框。
function Enviar() {
var TableData = new Array();
$('#dtBasicExample tr').each(function(row, tr) {
if ($(tr).find('td:eq(10)').checked == true) //check if checkbox is checked
{
alert('check');
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
<tr>
<th>Tipo Documento<i class="fa fa-sort"></i></th>
<th>Nº Electrónico<i class="fa fa-sort"></i></th>
<th style="width: 200px;"><input type="checkbox" id="checkTotal" />Aceptación</th>
<th><input type="checkbox" id="checktodas" />Enviar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Factura</td>
<td>001</td>
<td>
<input type='checkbox' class='chb' id='chbTotal' name='Total' value='Total'>Total<br>
<input type='checkbox' class='chb' name='Parcial' value='Parcial'>Parcial<br>
<input type='checkbox' class='chb' name='Rechazo' value='Rechazo'>Rechazo
</td>
<td>
<input type='checkbox' class='chcktbl' /> Enviar
</td>
</tr>
<tr>
<td>Factura</td>
<td>002</td>
<td>
<input type='checkbox' class='chb' id='chbTotal' name='Total' value='Total'>Total<br>
<input type='checkbox' class='chb' name='Parcial' value='Parcial'>Parcial<br>
<input type='checkbox' class='chb' name='Rechazo' value='Rechazo'>Rechazo
</td>
<td>
<input type='checkbox' class='chcktbl' /> Enviar
</td>
</tr>
<tfoot>
</tfoot>
</table>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-16 02:29:17
通常，您可以使用：.prop(checked)检查jQuery中复选框的状态。无论复选框是否选中，它都将返回一个布尔值。
请参阅：http://api.jquery.com/prop/
也要注意检查正确的元素。您需要获得正确的复选框。在您的例子中，我查询的是类为chcktbl的类，它总是"Enviar“类。
function Enviar() {
var TableData = new Array();
$('#dtBasicExample tr').each(function(row, tr) {
if ($(tr).find('td .chcktbl').prop('checked') == true) //check if checkbox is checked
{
$(tr).find('td .chcktbl').parent().addClass('active');
}else {
$(tr).find('td .chcktbl').parent().removeClass('active');
}
})
}
document.getElementById('check').addEventListener('click', function () {
Enviar();
}).active{
background: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
<tr>
<th>Tipo Documento<i class="fa fa-sort"></i></th>
<th>Nº Electrónico<i class="fa fa-sort"></i></th>
<th style="width: 200px;"><input type="checkbox" id="checkTotal" />Aceptación</th>
<th><input type="checkbox" id="checktodas" />Enviar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Factura</td>
<td>001</td>
<td>
<input type='checkbox' class='chb' id='chbTotal' name='Total' value='Total'>Total<br>
<input type='checkbox' class='chb' name='Parcial' value='Parcial'>Parcial<br>
<input type='checkbox' class='chb' name='Rechazo' value='Rechazo'>Rechazo
</td>
<td>
<input type='checkbox' class='chcktbl' /> Enviar
</td>
</tr>
<tr>
<td>Factura</td>
<td>002</td>
<td>
<input type='checkbox' class='chb' id='chbTotal' name='Total' value='Total'>Total<br>
<input type='checkbox' class='chb' name='Parcial' value='Parcial'>Parcial<br>
<input type='checkbox' class='chb' name='Rechazo' value='Rechazo'>Rechazo
</td>
<td>
<input type='checkbox' class='chcktbl' /> Enviar
</td>
</tr>
<tfoot>
</tfoot>
</table>
<button id="check">check</button>
Stack Overflow用户
发布于 2019-05-16 01:59:18
在简单的视图中，我看到有一个语法错误。
从这个开始：
function Enviar()
{
var TableData = new Array();
$('#dtBasicExample tr').each(function(row, tr)
{
if($(tr).find('td:eq(10)').checked==true)//check if checkbox is checked
{
alert('check');
}
}
}缺少属于each()的);
function Enviar()
{
var TableData = new Array();
$('#dtBasicExample tr').each(function(row, tr)
{
if($(tr).find('td:eq(10)').checked==true)//check if checkbox is checked
{
alert('check');
}
}); // << THE ); WAS MISSING HERE. THIS WAS PRODUCING AN ERROR
}如果这解决了你的问题，请让我知道。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56155116
复制相关文章
相似问题