检查是否选中了带有多个复选框的 html 表上的特定复选框。 JS/JQuery答案

【问题标题】：Check if specific checkbox on html table with multiple checkboxes is checked. JS/JQuery检查是否选中了带有多个复选框的 html 表上的特定复选框。 JS/JQuery
【发布时间】：2019-05-16 03:24:40
【问题描述】：

我有这个从数据库填充的表，我想检查每个行是否使用 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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

一般来说，您可以使用.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>

【讨论】：

【解决方案2】：

乍一看，我发现有语法错误。

从这里：

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
}

如果这能解决您的问题，请告诉我。

【讨论】：