Tengo el siguiente código en javascript donde selecciono los checkbox en una tabla
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>
Aparte estoy utilizando una liberia en Jquery ddtf.js, lo que realiza me filtra los campos de una tabla. Esta Liberia filtra agregando el css style display : none
.
Pero si filtro y selecciono el checkbox que me selecciona el resto de los checkbox este igual me selecciona los checkbox escondidos.
Como puedo agregar una condición que me seleccione solos los que esta visibles en mi tabla?
display:none
altr
no al input