CODEWITHSUNDEEP
javascriptjqueryhtml
Errol28Rose
Errol28Rose

Reputation: 81

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

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>

Upvotes: 0

Views: 312

Answers (2)

Bellian
Bellian

Reputation: 2140

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>

Upvotes: 1

acarlstein
acarlstein

Reputation: 1838

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.

Upvotes: 0

Related Questions