Personalizar los inputs del formulario ayuda a mejorar la interfaz del usuario en un sitio web. Los checkboxes y los botones de radio personalizados son muy útiles si lo que deseas es reemplazar el estilo por defecto de estos elementos. Con CSS y jQuery puedes personalizar de manera sencilla estos checkboxes y botones de radio según los requisitos de tu diseño.
En este tutorial, te mostraremos cómo reemplazar botones de radio y los checkboxes por una imagen utilizando jQuery. Existen muchos plugins de jQuery que nos permiten hacer esto mismo, pero en este artÃculo lo haremos nosotros mismos.
En este ejemplo utilizaremos jQuery y Bootstrap (para personalizar los botones de radio y los checkboxes) para implementar el nuevo estilo de nuestros elementos, por lo tanto, tendremos que incluir dichas librerÃas.
<!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Bootstrap library --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
En el siguiente código reemplazaremos los botones de radio con imágenes utilizando jQuery y CSS.
Codigo HTML
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-radio"> <img class="img-responsive" src="images/radio-image.png" /> <input type="radio" name="image_radio" value="1" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div> <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-radio"> <img class="img-responsive" src="images/radio-image.png" /> <input type="radio" name="image_radio" value="2" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div> <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-radio"> <img class="img-responsive" src="images/radio-image.png" /> <input type="radio" name="image_radio" value="3" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div> <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-radio"> <img class="img-responsive" src="images/radio-image.png" /> <input type="radio" name="image_radio" value="4" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div> <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-radio"> <img class="img-responsive" src="images/radio-image.png" /> <input type="radio" name="image_radio" value="5" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div>
Código jQuery
$(document).ready(function(){ // add/remove checked class $(".image-radio").each(function(){ if($(this).find('input[type="radio"]').first().attr("checked")){ $(this).addClass('image-radio-checked'); }else{ $(this).removeClass('image-radio-checked'); } }); // sync the input state $(".image-radio").on("click", function(e){ $(".image-radio").removeClass('image-radio-checked'); $(this).addClass('image-radio-checked'); var $radio = $(this).find('input[type="radio"]'); $radio.prop("checked",!$radio.prop("checked")); e.preventDefault(); }); });
Código CSS
.image-radio { cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 4px solid transparent; margin-bottom: 0; outline: 0; } .image-radio input[type="radio"] { display: none; } .image-radio-checked { border-color: #4783B0; } .image-radio .glyphicon { position: absolute; color: #4A79A3; background-color: #fff; padding: 10px; top: 0; right: 0; } .image-radio-checked .glyphicon { display: block !important; }
En el siguiente código reemplazaremos checkboxes con imágenes utilizando jQuery y CSS.
Codigo HTML
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-checkbox"> <img class="img-responsive" src="images/checkbox-image.png" /> <input type="checkbox" name="image_check[]" value="1" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div> <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-checkbox"> <img class="img-responsive" src="images/checkbox-image.png" /> <input type="checkbox" name="image_check[]" value="2" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div> <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-checkbox"> <img class="img-responsive" src="images/checkbox-image.png" /> <input type="checkbox" name="image_check[]" value="3" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div> <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-checkbox"> <img class="img-responsive" src="images/checkbox-image.png" /> <input type="checkbox" name="image_check[]" value="4" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div> <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"> <label class="image-checkbox"> <img class="img-responsive" src="images/checkbox-image.png" /> <input type="checkbox" name="image_check[]" value="5" /> <i class="glyphicon glyphicon-ok hidden"></i> </label> </div>
Código jQuery
// add/remove checked class $(".image-checkbox").each(function(){ if($(this).find('input[type="checkbox"]').first().attr("checked")){ $(this).addClass('image-checkbox-checked'); }else{ $(this).removeClass('image-checkbox-checked'); } }); // sync the input state $(".image-checkbox").on("click", function(e){ $(this).toggleClass('image-checkbox-checked'); var $checkbox = $(this).find('input[type="checkbox"]'); $checkbox.prop("checked",!$checkbox.prop("checked")); e.preventDefault(); });
Código CSS
.image-checkbox { cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 4px solid transparent; margin-bottom: 0; outline: 0; } .image-checkbox input[type="checkbox"] { display: none; } .image-checkbox-checked { border-color: #4783B0; } .image-checkbox .glyphicon { position: absolute; color: #4A79A3; background-color: #fff; padding: 10px; top: 0; right: 0; } .image-checkbox-checked .glyphicon { display: block !important; }
Obtener el valor del botón de radio seleccionado
Una vez enviado el formulario, puedes obtener el valor del botón de radio seleccionado utilizando PHP de este modo:
$selectedValue = $_POST['image_radio'];
Obtener el valor del checkbox seleccionado
Una vez enviado el formulario, puedes obtener el valor del checkbox seleccionado utilizando PHP de este modo:
$selectedValueArr = $_POST['image_check'];