0

tengo una pagina donde tengo N checkbox, de los cuales al menos uno debe estas tickeado antes de realizar el submit, tengo lo siguiente pero no me valida los check, alguien sabe por que?

introducir la descripción de la imagen aquí

El código JS es:

<script type="text/javascript">
    $('form').submit(function (e) {
        if ($('input[type=checkbox]:checked').length === 0) {
            e.preventDefault();
            alert('Debe seleccionar al menos un valor');
        }
    });
</script>

En la imagen se puede ver que el la UI tengo los check, tengo los archivos de jquery cargados y también se muestra la porción de código que debería validar los checks.

6
  • Deberías insertar los src javascript dentro del <head></head>
    – Charlybs
    Commented el 7 dic. 2016 a las 20:01
  • 1
    Por favor, no incluyas imagenes de código, directamente agrega el código en tu pregunta. Te recomiendo que leas Cómo preguntar y ejemplo mínimo verificable
    – Marcos
    Commented el 7 dic. 2016 a las 20:07
  • Se que no te da una solución concreta, pero los grupos de radio buttons tienen ese comportamiento por defecto Commented el 7 dic. 2016 a las 20:10
  • mmmmm son checkbox no radios, ademas vi en muchas ejemplos que si funciona : jsfiddle.net/miguelerm/GLd4f Pero a mi no.
    – RSillerico
    Commented el 7 dic. 2016 a las 20:12
  • @MikeVelazco en los grupos de radiobuttons solo puedes tener uno seleccionado, el OP quiere al menos uno pero pueden ser más, no creo que le sirva
    – user7176
    Commented el 7 dic. 2016 a las 20:14

4 respuestas 4

0

Necesitas agregar todo dentro de un $(document).ready().

$(document).ready(function(){
  $('form').submit(function(e){

    if (!$("input:checkbox:checked").length){
      alert("No hay checkbox 'checked'");
    }
            e.preventDefault();
  });
});

JSBIN

7
  • Así ya funciona, jejejeje pero ahora se me presento otro dilema, los checkbox se crean dinámicamente, o sea puede tener 0, 1 o N Checkbox, y pues cuando existe 0 (CERO) checkbox no me deja hacer submit, entonces como puedo hacer la validación únicamente cuando si existan checkbox?
    – RSillerico
    Commented el 7 dic. 2016 a las 20:35
  • Intenta cambiando el $("input:checkbox").prop('checked').length por $("form").find("input:checkbox").prop('checked').length Commented el 7 dic. 2016 a las 20:41
  • 1
    Para obtener el numero de existentes podrias utilizar $("form").find("input:checkbox").length y asi podrias utilizar $("form").find("input:checkbox").length && !$("form").find("input:checkbox").prop('checked').length dentro de tu if Commented el 7 dic. 2016 a las 20:44
  • No entiendo, con ese código siempre salta el alert, no importa si los checkbox están chequeados o no
    – user7176
    Commented el 7 dic. 2016 a las 22:11
  • @blonfu tiene razón. Solo hay que cambiar el selector. a $('input:checkbox:checked') Commented el 7 dic. 2016 a las 22:26
0
<script type="text/javascript">
  $(document).ready(function(){
    $('form').submit(function (e) {
         if($("input[type=checkbox]:checked").length != 0){
            //OK
         }else{
           alert('Debe seleccionar al menos un valor');
           return false;
         }
    });
   });
</script>
0

Bueno al final quedo asi:

<script type="text/javascript">
    $(document).ready(function () {
        $('form').submit(function (e) {
            if ($("form").find("input:checkbox").length > 0) {
                if ($('input[type=checkbox]:checked').length === 0) {
                    e.preventDefault();
                    alert('Debe seleccionar al menos un valor');
                }
            }
        });
    });
</script>

y funciona a la perfección.

0

Está sería la versión optimizada :D

<script type="text/javascript">
  $(document).ready(function(){
    var $form = $('form');
    $form.on('submit', (function (e) {
        e.preventDefault(); // Si se va a enviar un AJAX
         if($form.find("input:checked").length > 0){
            //OK
         }
    });
   });
</script>

¿Por qué? por que al guardar el $formulario en una variable, ya no va a buscar otra vez en todo el DOM. asi como find, solo busca dentro del DOM elegido, en ves de todo el documento.

Y jquery recomienda no utilizar $('input[type=checkbox]:checked')

https://api.jquery.com/checked-selector/

1
  • Donde menciona eso-? Gracias
    – cignius
    Commented el 15 dic. 2016 a las 3:23

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.