Replace Radio Button and Checkbox with Image using jQuery

Form inputs customization helps to improve User-Interface of the webpage. Custom checkbox and radio inputs are very useful when you want to replace default browser’s input style. Using CSS and jQuery you can easily customize checkboxes or radio buttons as per the design requirement.

In this tutorial, we show you how to replace radio button and checkbox with image using jQuery. There are many jQuery plugins available for replacing radio button and checkbox with image, but you can do it easily using custom jQuery code. You can use an image instead of checkbox or radio button in the form using CSS and jQuery without any third-party plugin.

The example code uses jQuery and Bootstrap (styling the radio button and checkbox list) to implement the image radio button and checkbox, so, include these libraries.

<!-- 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>

Replace Radio Button with Image

The following code will replace radio buttons with images using jQuery and CSS.

HTML Code:

<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>

jQuery Code:

$(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();
    });
});

CSS Code:

.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;
}

Replace Checkbox with Image

The following code will replace checkboxes with images using jQuery and CSS.

HTML Code:

<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>

jQuery Code:

// 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();
});

CSS Code:

.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;
}

Get Selected Radio Button Value

After form submission, you can get the selected radio button value using PHP.

$selectedValue = $_POST['image_radio'];

Get Checked Checkbox Value

After form submission, you can get the checked checkbox value using PHP. It will return the checked values as an array.

$selectedValueArr = $_POST['image_check'];