Check if specific checkbox on html table with multiple checkboxes is checked. JS/JQuery

Question

I have this table which I populate from database and I want to check foreach row whether if the checkbox on Enviar column is checked using JS/JQuery.

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>

Bellian · Accepted Answer · 2019-05-15 18:29:17Z

Generaly you can check the state of the checkbox in jQuery using: .prop(checked). It will return a boolean value wehter the the checkbox is checked or not.

See: http://api.jquery.com/prop/

Also be shure to check the right element. You need to get the right checkbox. In your case i queried for the one with class chcktbl wich was always the "Enviar" one.

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>

acarlstein · Accepted Answer · 2019-05-15 17:59:18Z

At plain view, I see that there is a syntax mistake.

From this:

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');  
        }
    }
}

There is a missing ); that belongs to 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
}

Please let me know if that solves your issue.

Collectives™ on Stack Overflow

Check if specific checkbox on html table with multiple checkboxes is checked. JS/JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related