How to use radio buttons with images. Radio button image demo, radio buttons as images

Radio Button Image Demo | How to use Radio buttons as images?

by

How to use Radio buttons as images :

 If you’re a web developer or designer, sometimes people will give you requirements for your projects. For example, they might say that they want the radio buttons on their website to be pictures instead of words. But how can we make radio buttons as images? Well in this article I’m going to show you! 

What is Radio Button ?

You know how when you are playing with your toy and you have to choose between two things? Well, sometimes you want to choose just one thing. That’s where the radio button comes in! It lets you pick just one choice out of many different ones.

Simply, Radio buttons are an input element that allows users to choose from only one out of a limited amount of options.

Example of Radio buttons in HTML is as shown in the below…

<input name="Payment_Mode" type="radio" value="Online" />
<input name="Payment_Mode" type="radio" value="COD" />

What is Radio Button Image ?

Radio button image is all about replacing traditional radio buttons with images, Observe the below example of how it would be used in practice…

Radio Button Image Demo

Now, Let’s see step by step and you are going to love this next one

Steps for Creating Radio Button as Images :

Step 1 : Create HTML Form

Firstly, Let’s create an HTML form of radio buttons.

<body style="background-color: rgb(19,0,27);">
<div align="center" style=" color:white;">
    <h1 style="font-family:Berlin Sans FB;color:rgb(158, 0, 226)">
      <strong> Images as a Radio Buttons </strong>
    </h1>
    <form method="post" action="javascript:void(0)">
      <input type="radio" id="radiobtn1" name="item" class="Send_data  input-hidden" value="Apliance Repair" />
      <label for="radiobtn1">
        <img src="https://raw.githubusercontent.com/RahulVijayam/web/main/Assets/Apliance-Repair.webp" style="width:130px;border-radius:20px;" />
        <br><br>
        <span>Apliance Repair</span>
      </label>
      <input type="radio" id="radiobtn2" name="item" class="Send_data  input-hidden" value="Electrician" />
      <label for="radiobtn2">
        <img src="https://raw.githubusercontent.com/RahulVijayam/web/main/Assets/Electrician.webp" style="width:130px;border-radius:20px;" />
        <br><br>
        <span>Electrician</span>
      </label>
      <br>
      <input type="radio" id="radiobtn3" name="item" class="Send_data  input-hidden" value="Mason" />
      <label for="radiobtn3">
        <img src="https://raw.githubusercontent.com/RahulVijayam/web/main/Assets/mason.webp" style="width:130px;border-radius:20px;" />
        <br><br>
        <span>Mason</span>
      </label>
      <input type="radio" id="radiobtn4" name="item" class="Send_data  input-hidden" value="Plumber" />
      <label for="radiobtn4">
        <img src="https://raw.githubusercontent.com/RahulVijayam/web/main/Assets/plumber.webp" style="width:130px;border-radius:20px;" />
        <br><br>
        <span>Plumber</span>
      </label>
    </form>
    <div id="loading" style="color:rgb(157, 255, 0)">
    </div>
  </div>

Step 2 : Adding CSS to HTML form

Next, Let’s add some CSS to make the form more beautiful and attractive for the user.

.input-hidden {
  /* For Hiding Radio Button Circles */
  position: absolute;
  left: -9999px;
}
input[type="radio"]:checked + label > img {
  border: 1px solid rgb(157, 255, 0);
  box-shadow: 0 0 3px 3px #9e00e2;
}
input[type="radio"] + label > img {
  border: 1px rgb(0, 0, 0);
  padding: 10px;
  transition: 500ms all;
}
input[type="radio"]:checked + label > img {
  transform: rotateZ(-10deg) rotateX(10deg);
}

Step 3 : Adding jQuery Script

Finally, Let’s add some jQuery which will help us to identify which option we have selected.

$(document).ready(function () {
  $(".Send_data").click(function (e) {
    if ($("input[type=radio][name=item]:checked").length == 0) {
      // alert("Please select atleast one");
      return false;
    } else {
      var item = $("input[type=radio][name=item]:checked").val();
      //  window.alert("You Selected")
      window.setTimeout(function () {
        // do whatever you want to do
        $("#loading").html("You Selected : " + item);
      }, 600);
      $("#loading").html(
        '<br><span class="spinner-border fast"  style="width: 2rem; height: 2rem;color:green;"  role="status"></span>'
      );
    }
  });
});

Radio Button Image​ Demo Video

Download
Demo

If you have any questions or suggestions, please feel free to leave a comment below.


How to Submit HTML form using jQuery Ajax

Related Posts:

Leave a Comment