Show Hidden Element when checking a Checkbox

Navigation
0

My question is: How would you make the "Delete Selected" button that is hidden with "display: none" when you check any of the Checkboxes; And when you uncheck them all, the button is hidden again.

And if possible, show an Alert by asking "Are you sure you delete (No. of selected) records?"

Thanks in advance ... !!! 

<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>
    
asked by jose7777 06.04.2018 в 17:11
source

5 answers

1

Part 1 - Check marked items

To manipulate the style of DOM elements jquery provides us with several ways to do it. All involve modifying the css property that we want, leading to the direct use of a function that performs all the manipulation of the style in an abstract way with methods such as show , hide ...

Or on the other hand by implicitly modifying the css properties that we want from the element or elements in question with the use of the method css or 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>

Once we know this we only have to execute a function every time the user clicks on each check it could be something like this 

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>

Part 2 - Run confirmation alert

For the second question you ask the answer is whether, if it can be done, in fact the functionality of the browser that allows us to do it is called with the function confirm . The result of this function will be true or false and will help us to know the user's decision. 

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>
    
answered by 06.04.2018 / 17:54
source
2

I have taught the checkboxes and an id to the button to handle it in a better way. The example would be like this: 

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>
    
answered by 06.04.2018 в 17:28
0

You can use jquery to do what you need. I leave an example, the submit button changes it to a button to be able to then send the form with jquery when validating the checkboxes. I hope it serves you. 

$(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>
    
answered by 06.04.2018 в 17:41
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>
    
answered by 06.04.2018 в 17:37
0

As follows:

EDIT

Added confirmation message

To the original code I just put a class (boton-oculto) to the button that is hidden to be able to identify it more easily from 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>
    
answered by 06.04.2018 в 17:39
laravel send data from a table to a modal window The Ionic program makes me the build but it does not generate the APK