0

Mi pregunta es: ¿Cómo haría para que al marcar cualquiera de los Checkbox aparezca el botón “Eliminar Seleccionados” que está oculto con “display:none”; Y al desmarcarlos todos, se oculte de nuevo el botón.

Y si es posible, que muestre un Alert preguntando si “¿Está seguro de eliminar (Nº de seleccionados) registros?”

Gracias de antemano...!!!

<form name="fmr_1">

<!-- boton oculto -->
<input type="submit" value="Eliminar Seleccionados" style="display:none">
<br><br>

<input type="checkbox">Luis <br>
<input type="checkbox">José <br>
<input type="checkbox">Pedro <br>
<input type="checkbox">Miguel <br>

</form>

5
  • esto se puede hacer con Ajax te sugiero que investigues esa tecnologia
    – Mr.Manutri
    Commented el 6 abr. 2018 a las 15:14
  • Hola Jose, bienvenido a Stack Overflow en español. Por favor, lee el recorrido de bienvenida para aprender el funcionamiento básico del sitio. Lo más importante es haberlo intentado. Sobre tu intento nos contextualizas en los problemas concretos que tienes y sobre ello podemos ayudarte. Si no lo has intentado, investiga y prueba. Después has de editar la pregunta para añadir la informacion que falta segun Cómo preguntar y ejemplo mínimo verificable. Un saludo.
    – lois6b
    Commented el 6 abr. 2018 a las 15:19
  • 4
    @Mr.Manutri no creo que Ajax sea necesario en este caso. Yo pondria un evento para todos los inputs con cierta clase y que cuando cambie su estado compruebe cuantos hay marcados para ocultar o no el boton que pide. Un saludo
    – lois6b
    Commented el 6 abr. 2018 a las 15:20
  • Hola... Yo lo hacía con una función jquery dentro de un bucle, a la cual le pasaba el ID de los checkbox en cada vuelta. Pero esto estaba mal hecho, porque la función se repetía en cada vuelta. Como no se mucho de Jquery lo deje así no más. Pero gracias al foro pude conseguir mejorarlo. la próxima comparto el código. Saludos...!!!
    – jose7777
    Commented el 8 abr. 2018 a las 2:23
  • @jose7777 no hace falta que sea la proxima vez. por favor, pulsa en editar para añadir lo que intentaste aunque ya esté resuelta. Un saludo
    – lois6b
    Commented el 9 abr. 2018 a las 7:12

5 respuestas 5

2

He puesto clases a los checkbox y un id al botón para manejarlo de mejor forma. El ejemplo sería así:

var seleccionados = 0

$(".check-nombres").change(function() {
  seleccionados = $(".check-nombres:checked").length
  $("#boton-eliminar").toggle(seleccionados > 0)
})
$("#boton-eliminar").click(function() {
  alert("¿Está seguro de eliminar "+ seleccionados +" registro(s)?")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="fmr_1" onsubmit="return false">

<!-- boton oculto -->
<input type="submit" id="boton-eliminar" value="Eliminar Seleccionados" style="display:none">
<br><br>

<input type="checkbox" class="check-nombres">Luis <br>
<input type="checkbox" class="check-nombres">José <br>
<input type="checkbox" class="check-nombres">Pedro <br>
<input type="checkbox" class="check-nombres">Miguel <br>

</form>

1
  • 1
    Te recuperé la respuesta ya que al final el resto de usuarios no esperó a que el autor la modificara. Buena respuesta. un saludo
    – lois6b
    Commented el 9 abr. 2018 a las 7:11
1

Parte 1 - Comprobar elementos marcados

Para manipular el estilo de los elementos del DOM jquery nos provee de varias formas de hacerlo. Todas conllevan modificar la propiedad css que queramos, conllevando el uso directo de una funcion que realiza toda la manipulacion del estilo de forma abstracta con metodos como show, hide ...

O por otro lado modificando implicitamente las propiedades css que queramos del elemento o elementos en cuestión con el uso del metodo css o attribute

$(function(){
  $('#modficarImplicitamente').css('display', 'none');
  $('#modficarAbstractamente').hide();
});
* {
margin: 0px;
padding: 0px;
}

#modficarImplicitamente {
  height: 50px;
  background: red;
  width: 50%;
}

#modficarAbstractamente {
  height: 50px;
  background: green;
  width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="modficarImplicitamente">modficarImplicitamente</div>
<div id="modficarAbstractamente">modficarAbstractamente</div>

Una vez conociendo esto solo tenemos que ejecutar una funcion cada vez que el usuario haga click en cada check podria ser algo como esto

function tengoQueMostrarBoton() {
  var elementos = $('input.miOpcion');
  var algunoMarcado = elementos.toArray().find(function(elemento) {
     return $(elemento).prop('checked');
  });
  
  if(algunoMarcado) {
    $('#miBoton').show();
  } else {
    $('#miBoton').hide();
  }
}
#miBoton {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input class="miOpcion" type="checkbox" value="1" onclick="tengoQueMostrarBoton()" /> 
<input class="miOpcion" type="checkbox" value="2" onclick="tengoQueMostrarBoton()" /> 
<input class="miOpcion" type="checkbox" value="3" onclick="tengoQueMostrarBoton()" /> 
<input class="miOpcion" type="checkbox" value="4" onclick="tengoQueMostrarBoton()" /> 
<input class="miOpcion" type="checkbox" value="5" onclick="tengoQueMostrarBoton()" /> 


<button id="miBoton"> hacer algo </button>

Parte 2 - Ejecutar alerta de confirmación

Para la segunda pregunta que haces la respuesta es si, si se puede hacer, de hecho la funcionalidad del navegador que nos permite hacerlo se llama con la función confirm. El resultado de esta función será true o false y nos servirá para saber la decisión del usuario.

function eliminar() {
  //implmentar logica con Ajax por ejemplo
  alert("Eliminando");
}

function abrirPregunta() {
  var respuesta = confirm("Desea eliminar X elementos?");
  if(respuesta) {
    eliminar();
  }
}
<button onclick="abrirPregunta()">Eliminar</button>

0

Puedes usar jquery para poder realizar lo que necesitas. Te dejo un ejemplo, el botón de submit lo cambie por un botón para poder realizar luego el envío del formulario con jquery al hacer la validación los checkboxes. Espero te sirva.

$(document).ready(function() {
        var totalCheckeds = 0;
        $("input:checkbox").click(function() {
            totalCheckeds = $("input:checkbox:checked").length;
            if (totalCheckeds > 0) {
                $("input:button").show();
            } else {
                $("input:button").hide();
            }
        });


        $("input:button").click(function() {
            var resp = confirm("Esta seguro de eliminar " + totalCheckeds + " registros?");

            if (resp) {
                $("#fmr_1").submit();
            } 
        });         

});

<form name="fmr_1" id="fmr_1" method="post">

    <!-- boton oculto -->
    <input type="button" value="Eliminar Seleccionados" style="display:none">
    <br><br>

    <input type="checkbox" name="users[]" value="1">Luis <br>
    <input type="checkbox" name="users[]" value="2">José <br>
    <input type="checkbox" name="users[]" value="3">Pedro <br>
    <input type="checkbox" name="users[]" value="4">Miguel <br>

</form>
0

$(function(){
      $('.change').change(function () {
       $('#btn_submit').css("display", "block");
      });
      $('#fmr_1').on('submit', function(e){
        e.preventDefault();
        //Creo el array que almacenará los valores de los checkbox
        var val = [];
        $(':checkbox:checked').each(function(i){
          //Almaceno los checkbox 'checked', su valor en un array
          val[i] = $(this).val();
        });
        console.log('val: ['+val+']');
        if (confirm('¿Está seguro de eliminar '+val.length+ ' registros?') == true) {
          //Envias los datos por ajax ejem...
          return true;
        } else {
          //No hace nada.
          return false;
        }
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="fmr_1" id="fmr_1">

<!-- boton oculto -->
<input type="submit" value="Eliminar Seleccionados" style="display:none;" id='btn_submit'>
<br><br>

<input type="checkbox" value="luis" class="change">Luis <br>
<input type="checkbox" value="jose" class="change">José <br>
<input type="checkbox" value="pedro" class="change">Pedro <br>
<input type="checkbox" value="miguel" class="change">Miguel <br>

</form>

0

De la siguiente manera:

EDIT

Agregado mensaje de confirmacion

Al código original solo le puse una clase (boton-oculto) al botón que esta oculto para poder identificarlo mas fácilmente desde jquery

$('input[type=checkbox]').change(function(){
    if($('input[type="checkbox"]').is(':checked')){
       $(".boton-oculto").show()
    }else{
       $(".boton-oculto").hide()
    }
});

$('form').submit(function( event ) {
   var seleccionados = $(":checkbox:checked").length;
   if(!confirm('¿Está seguro de eliminar '+seleccionados+' registros?') ){
      event.preventDefault();
   } 
});
.boton-oculto{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="fmr_1">

<!-- boton oculto -->
<input type="submit" value="Eliminar Seleccionados" class="boton-oculto">
<br><br>

<input type="checkbox">Luis <br>
<input type="checkbox">José <br>
<input type="checkbox">Pedro <br>
<input type="checkbox">Miguel <br>

</form>

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.