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>