Check only the visible checkboxes

Question

Check only the visible checkboxes

Navigation

#1 by (2 votes)

1

I have the following code in javascript where I select the checkboxes in a table

function checkAll(ele) {
  //Obtener todos los checkbox que estan visibles;
  var checkboxes = $(':checkbox:visible');
  var celdas = $('#table tbody > tr').find('td');
  var status = $(celdas[7]).html();

  if (ele.checked) {
    //Recorro todos los checkbox y los voy seleccionando
    checkboxes.each(function(index, input){
       input.checked=true;
    });
  } else {
       //Recorro todos los checkbox y los voy deseleccionando
      checkboxes.each(function(index, input){
        input.checked=false;
    });
  }
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
      <th><input type="checkbox" class="form-check-input" onchange="checkAll(this)" id="selectAll"></th> 
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td>001</td>
  <td>Item2</td>
  <td><input class="form-check-input" id="Escoge1" name="Escoge" type="checkbox"></td>
  </tr>
   <tr>
  <td>2</td>
  <td>002</td>
  <td>Item1</td>
  <td><input class="form-check-input" id="Escoge2" name="Escoge" type="checkbox"></td>
  </tr>
    <tr style="display: none;">
  <td>3</td>
  <td>003</td>
  <td>Item3</td>
  <td><input class="form-check-input" id="Escoge3"  name="Escoge" type="checkbox"></td>
  </tr>
  </tbody>
</table>

Apart I am using a liberia in Jquery ddtf.js , what it does filter me the fields of a table. This Liberia filters adding the css style display : none .

But if I filter and select the checkbox that selects me the rest of the checkboxes, I still select the hidden checkboxes.

How can I add a condition that I select only those that are visible in my table?

javascript jquery html

asked by MoteCL 18.10.2018 в 22:31

source

1 answer

User permissions between oracle databases Problem with slideToggle

score 2 · Accepted Answer

Try this:

function checkAll(ele) {
  //Obtener todos los checkbox que estan visibles;
  var checkboxes = $(':checkbox:visible');
  var celdas = $('#tableDespacho tbody > tr').find('td');
  var status = $(celdas[7]).html();

  if (ele.checked) {
    //Recorro todos los checkbox y los voy seleccionando
    checkboxes.each(function(index, input){
        $(input).attr('checked', true); 
    });
  } else {
       //Recorro todos los checkbox y los voy deseleccionando
      checkboxes.each(function(index, input){
        $(input).removeAttr('checked'); 
    });
  }
}