3

Tengo una serie de checkbox que básicamente se dividen en:

  • Todos los nodos.
  • Nodo 1, nodos 2, nodo 3, etc.

Lo que quiero es tener una función que me permita controlar que si la opción de todos está seleccionada el resto estén sin selección, y al contrario, si una opción concreta (o varias) está seleccionadas, todos no lo esté.

He escrito el siguiente código:

function checkboxController() {
  alert('Hello');
  // Solo permite tener seleccionado o "todos" o nodos sueltos
  $("#todos_nodeFilter").on('click', function() {
    if ($('#todos_nodeFilter').is(':checked')) {
      $(".optionNodeFilter").prop('checked', false);
    }
  });
  $(".optionNodeFilter").on('click', function() {
    if ($('.optionNodeFilter').is(':checked')) {
      $("#todos_nodeFilter").prop('checked', false);
    }
  });
}

$(document).ready(function() {

  // Función para controlar comportamiento checkboxes.
  checkboxController();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<label id="todos_nodeLabel"><input type="checkbox" name="Todos_nodos" class="data_filters nodeFilter" id="todos_nodeFilter" checked>Todos</label>

<label><input type="checkbox" name="Node_1" class="data_filters nodeFilter optionNodeFilter">Nodo 1</label>
<label><input type="checkbox" name="Node_2" class="data_filters nodeFilter optionNodeFilter">Nodo 2</label>

EDIT: Al hacer aquí el snnipet para que pudierais verlo, veo que aquí si funciona perfectamente. Por lo tanto ahora estoy más perdido todavía...

La pregunta es, ¿por qué no me ejecuta la función?

Saludos y gracias.

4
  • 3
    ¿Podrías crear un ejemplo mínimo verificable con el html y el código que has puesto para simular el problema? Dependiendo de la versión de jQuery que uses igual tienes que cambiar .prop()por .attr()
    – x3k
    Commented el 21 ene. 2020 a las 10:30
  • veo un fallo en tu algoritmo, si todos las opciones están seleccionadas, 'todos' opción debería estarlo también. Lo que no veo es que controles cuántas opciones están seleccionadas. Es decir, si tenemos 10 opciones distintas, más la opción de todos (total 11), no es lo mismo tener 11 seleccionados, que 5, y dentro de esas 5, si la opción todos es una de ellas
    – Iria
    Commented el 21 ene. 2020 a las 10:42
  • De entrada no me hace falta seleccionar todos si todos están seleccionados, pues la info será misma. Y el control de selecciones es otra función que funciona bien :)
    – Lleims
    Commented el 21 ene. 2020 a las 11:16
  • ¿La versión de jQuery utilizada es la misma en el snippet que en tu código? ¿En tu código esos checkbox tienen algún otro evento que pueda estar en conflicto con este?¿Que es exactamente lo que no hace en tu código, llegar al evento, entrar en el if o deseleccionar el check?(Puedes poner un console.log en cada punto para depurar)
    – x3k
    Commented el 21 ene. 2020 a las 11:36

1 respuesta 1

0

Yo lo que haría sería crear dos funciones por separado.

  1. La primera llamada checktodosevent para poder detectar cuando el check de todos cambia entre checado y no checado.

  2. El segundo es nodoevent que verifica cuántos elementos totales o nodos existen sin checar, cuando el número de elementos sin checar sea igual al número de nodos total el check de todos va a ponerse como checado.

Además, agregué una clase más a cada nodo llamada item-check para que se puedan diferenciar más los nodos y el check de todos.

Usé prop de jQuery para alternar el estatus de un checkbox entre activo e inactivo, aunque por ahí te comentaban que puedes usar .attr, aunque estoy usando la misma versión de jQuery que tu código de ejemplo.

function checktodosevent(element) {
  if ( $(element).is(":checked") ) {
    $(".item-check").prop("checked", false);
  }
  else {
    $(".item-check").prop("checked", true);
  }
}


function nodoevent(element) {
  console.log($(".item-check:not(:checked)").length,$(".item-check").length);
  if (  $(".item-check:not(:checked)").length == $(".item-check").length  ) {
    $("#todos_nodeFilter").prop("checked", true);
  }
  else {
    $("#todos_nodeFilter").prop("checked", false);
  }
}

$(document).ready(function() {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<label id="todos_nodeLabel"><input type="checkbox" name="Todos_nodos" onchange="checktodosevent(this);" class="data_filters nodeFilter" id="todos_nodeFilter">Todos</label>

<label><input onchange="nodoevent(this);" type="checkbox" name="Node_1" class="item-check data_filters nodeFilter optionNodeFilter" checked>Nodo 1</label>
<label><input onchange="nodoevent(this);" type="checkbox" name="Node_2" class="item-check data_filters nodeFilter optionNodeFilter" checked>Nodo 2</label>

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.