Cómo reemplazar botones de radio y checkboxes por imágenes utilizando jQuery

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'];

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP