检查是否选中了包含多个复选框的html表上的特定复选框。JS/JQuery

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (46)

我有这个表,我从数据库填充,我想检查foreach行是否Enviar使用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>
提问于
用户回答回答于

通常,您可以使用以下方法检查jQuery中复选框的状态:.prop(checked)。它将返回一个布尔值,选中或不选中复选框。

请参阅: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>
用户回答回答于

简而言之,我发现存在语法错误。

由此:

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
}

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

扫码关注云+社区

领取腾讯云代金券