2

Entiendo que hay varios temas sobre este caso, pero el inconveniente que tengo en mi código, no lo he leído.

Tengo unos checkbox dentro de un modal. La idea es que al seleccionar un check principal, se seleccionen todos y viceversa. El tema es que no puedo hacer funcionar el evento click del checkbox con JQUERY.

Mi header:

<link rel="icon" href="./img/logo.png">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- ESTILO -->
<?php include("../../../protected/style.php"); ?>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript"  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script type="text/javascript"  src="funciones/script.js"></script>

Extracción del HTML del checkbox principal:

<tr>
    <th>#</th>
    <th>Servicio</th>
    <th>Elemento</th>
    <th>Tipo</th>
    <th>RPN</th>
    <th><input type="checkbox" class="checkAll" id="check_all" name="check_all" /></th>
</tr>

Checkbox hijos;

Estos estan dentro de un bucle.

<tr>
    <td><input class='chk_hijo' type='checkbox' id='chbox_hijo_0' name='chbox_hijo_0' value='0' /></td>
    <td><input class='chk_hijo' type='checkbox' id='chbox_hijo_1' name='chbox_hijo_1' value='1' /></td>
    <td><input class='chk_hijo' type='checkbox' id='chbox_hijo_n' name='chbox_hijo_n' value='n' /></td>
</tr>

Mi JS, apuntando al checkbox principal:

<script>
    $(function(){
        $(".checkAll").click(function () {
            alert('prueba');
            $('.chk_hijo').attr('checked', this.checked);
        });
    });
</script>

Esto lo tengo actualmente después de cerrar el tag BODY en el index. Anteriormente lo tenía en un archivo JS de la siguiente manera:

$(function(){
    $(".checkAll").click(function () {
        alert('prueba');
        $('.chk_hijo').attr('checked', this.checked);
    });
});

También lo probé así;

$(document).ready( function (){
    $(".checkAll").click(function () {
        alert('prueba');
        $('.chk_hijo').attr('checked', this.checked);
    });
});

Y ninguna de estas formas, funcionó. Nunca me mostró ningún mensaje (entendiéndose que alert, debe mostrar un mensaje).

¿Qué podría estar mal o que sucede.?


Gracias a todos por sus comentarios.

Resolví el inconveniente añadiendo el evento onClick() al checkbox padre.

El evento click que declaraba en la función ready, no reconocía el checkbox padre y su acción click.

Quedó muy bien, de manera que al hacer click en el padre, se checkean todos y si lo desactivo, se desactivan todos, pero si estando todos activados desmarco algunos de los hijos, el padre se desactiva (pues ya no están todos activos).

Funciones JS

function check_all_chbx(){
    if( $('#check_all').is(':checked') ){
        $('.chk_hijo').prop('checked', true);
    }
    else{
        $('.chk_hijo').prop('checked', false);
    }
}
function check_xPadre(){
    if( $('.chk_hijo').length == $('.chk_hijo:checked').length ) {
        $('.checkAll').prop('checked', true);
    }
    else{
        $('.checkAll').prop('checked', false);
    }
}

Espero le sirva a alguien.-

Saludos y GRACIAS!

2
  • prueba usando el evento change en vez de click el 2 ago. 2019 a las 16:49
  • Te copié en mi respuesta el código para activar el padre cuando todos los hijos estén marcados.
    – Niche
    el 5 ago. 2019 a las 15:33

2 respuestas 2

3

El problema que veo es que $('.chk_hijo').attr('checked', this.checked); trae muchos, ya que hay mas de uno con la misma clase, deberias recorrerlos y cambiar la propiedad a true

$(function(){
  // 2
  $('.checkAll').on('click', function(){
    var _this = $(this); // 2
    $('.chk_hijo').each(function() { 
      this.checked = _this.prop("checked");
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <thead>
        <tr>
          <th>Test</th>
        </tr>
  </thead>
  <tbody>
  <tr>
      <td>Test 1<input type="checkbox" class="chk_hijo" /> </td>
   </tr>
   <tr>
      <td>Test 2<input type="checkbox"  class="chk_hijo" /> </td>
   </tr>
   <tr>
      <td>Test 3<input type="checkbox"  class="chk_hijo" /> </td>
   </tr>
  </tbody>
  <tfoot>
        <tr>
          <td>Select All</td>
          <td><input type="checkbox" class="checkAll" /></td>
        </tr>
      </tfoot>
</table>

2
  • Lo entiendo, en esa lógica no tengo inconvenientes. El tema es que el evento click no me funciona. Lo probé también con .on('click',function(){}); pero tampoco entra, entonces no se que puede estar mal. Comenté la línea $('.chk_hijo').attr('checked', this.checked); y solo deje el alert, para cuando se haga click en el checkbox, me salga el mensaje del alert, pero esto no sucede.
    – x_Mario
    el 2 ago. 2019 a las 17:13
  • El problema no tiene que ver con la llamada simultánea a múltiples elementos a través de una clase común. JS puede actualizar a la vez miles de elementos, ya que de todos modos jQuery hace una iteración a todos los elementos que encuentre con el selector.
    – Niche
    el 2 ago. 2019 a las 17:39
3

El atributo checked del <input type="checkbox" /> es un atributo que el DOM solamente valida su existencia, no su valor.

<div>
    <label>Checked true:</label><input type="checkbox" checked="true" />
</div>
<div>
    <label>Checked false:</label><input type="checkbox" checked="false" />
</div>
<div>
    <label>Checked 1:</label><input type="checkbox" checked="1" />
</div>
<div>
    <label>Checked no existe:</label><input type="checkbox" />
</div>

Por lo tanto, la lógica correcta debe ser que, cuando el checkbox global esté chequeado, a todos los checkboxes se les asigne el atributo checked, y cuando no, que a todos se les quite:

$(document).ready(function(){
  $('.marcar-todos').change(function(){
    // Cambiar setAttr y removeAttr por la función prop
    $('.marcar').prop('checked',this.checked);
  });
  $('.marcar').change(function(){
    
    // Obtener todos los elementos marcados
    
    let checks = $('.marcar:checked'); 
      
    // Si la cantidad de elementos marcados es igual a la cantidad de elementos
    //  marcar el checkbox de marcar todos. Sino, desmarcarlo.
      
    $('.marcar-todos').prop('checked',checks.length == $('.marcar').length);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><label>Marcar todos</label><input type="checkbox" class="marcar-todos" /></div>
<div><input type="checkbox" class="marcar" /></div>
<div><input type="checkbox" class="marcar" /></div>
<div><input type="checkbox" class="marcar" /></div>
<div><input type="checkbox" class="marcar" /></div>
<div><input type="checkbox" class="marcar" /></div>

3
  • Cuando marco uno, luego selecciono Todos funciona Ok, pero cuando desmarco uno y luego Todos no lo vuelve a marcar y es porque remueves un atributo que si tiene valores, basta solo con setear los valores en true o false no remover los atributos.
    – sioesi
    el 5 ago. 2019 a las 14:25
  • Debés asociar un evento .onchange() a los demás checkboxes para validar que al desmarcar uno, se debe desmarcar el principal. Actualicé mi respuesta para reflejar lo que te digo.
    – Niche
    el 5 ago. 2019 a las 14:55
  • Perfect, saque mi voto negativo ya que no funcionaba bien, ahora si, Saludos!!
    – sioesi
    el 5 ago. 2019 a las 15:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.