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.
html
y el código que has puesto para simular el problema? Dependiendo de la versión dejQuery
que uses igual tienes que cambiar.prop()
por.attr()
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)