Change Image on Radio Button Click Using Js or HTML

Change image on radio button click using JS or HTML

There is an HTML and CSS only solution using the :checked pseudo-class and a pseudo-element.

label.item {  display: inline-block;  position: relative;}label.item > input {    visibility: hidden;    position: absolute;}label.item > .radio-image::before {  content: url("http://placehold.it/50x50");}label.item > input[type="radio"]:checked + .radio-image::before {  content: url("http://placehold.it/75x75");}

<label class="item">    <input type="radio" value="10" name="size" required="required"/>    <div class="radio-image"></div></label><label class="item">    <input type="radio" value="10" name="size" required="required"/>    <div class="radio-image"></div></label><label class="item">    <input type="radio" value="10" name="size" required="required"/>    <div class="radio-image"></div></label><label class="item">    <input type="radio" value="10" name="size" required="required"/>    <div class="radio-image"></div></label><label class="item">    <input type="radio" value="10" name="size" required="required"/>    <div class="radio-image"></div></label>

Change an image using radio buttons

Here in the code-editor your code works pretty well!

function changeSrc() {    if (document.getElementById("bunnybutton").checked) {    document.getElementById("picture").src = "https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg";    } else if (document.getElementById("kittybutton").checked) {     document.getElementById("picture").src = "http://cutewallpaperss.com/wp-content/uploads/2015/01/cute_cats__cats_picture_cute_wallpaperss_hd_for_mobile.jpg";    }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><form action="" id="animals"><input type="radio" id="bunnybutton" name="animal" value="bunny" onClick="changeSrc()">bunny<br><input type="radio" id="kittybutton" name="animal" value="kitty" onClick="changeSrc()">kitty    </form><img src="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg" id="picture" width=600px>

Change image when radio button checked

You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.

<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">

Then use the change following juery to trigger the event.

$('input:radio[name="carpet-shape"]').change(
function(){
    var $src = "";
    if ($(this).val() == 'Square') {
        $src = "img/icons/carpet-square.svg";
    }
    else if ($(this).val() == 'Rectangle') {
        $src = "img/icons/carpet-rectangle.svg";
    }
    else if ($(this).val() == 'Round') {
        $src = "img/icons/carpet-round.svg";
    }
    else{
        $src = "img/icons/carpet-oval.svg"
    }

    $('.carpet-icon').attr('src',$src);

});

Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.

How to get different images to display when clicking on a radio button using JavaScript?

There are a few things you should correct so that your code works as expected.

<input type="radio" id = "statue-button" name = "landmark" checked value="statue"onClick= ('toggleImage')>Statue of Liberty<br>

should be changed to

<input type="radio" id="statue-button" name="landmark" checked value="statue" onClick="changeImage('statue')">Statue of Liberty<br>

So that the spaces are in the correct places and the onClick attribute is inside quotes.

Then inside the function changeImage() you should check the parameter (in my example named value) simply by comparison. The method match is intended to be used with regular expressions and not needed here.

function changeImage (value) {
    var image = document.getElementById('statue');
    if (value === 'statue') {
        image.src = '...';
    } else if (value === 'bridge') {
        image.src = '...';
    }
}

change image based on radio button selections

You can make use of data-* attribute in the checkbox element. On clicking get only the checked element and set the url from the attribute:

var container = document.querySelector(".main-container");
//Set on page load
container.style.backgroundImage = "url(../img/main3.jpg)";

document.querySelectorAll(".main-container__checkbox").forEach((item) => {
  item.addEventListener("click", function () { 
    //get only the checked one
    var checked = document.querySelector(".main-container__checkbox:checked");
    //get the url
    var dataURL = checked.getAttribute('data-url');
    //set the url
    container.style.backgroundImage = `url(${dataURL})`;
    
    //Test
    console.clear();
    console.log(document.querySelector(".main-container").style.backgroundImage);
  });
});

<div class="main-container">
  <input
    id="main-checkbox-1"
    type="radio"
    class="main-container__checkbox"
    name="main"
    value="first"
    checked
    data-url="../img/main3.jpg"
  />
  <label for="main-checkbox-1" class="main-container__checkbox-label"
    > </label
  >
  <input
    id="main-checkbox-2"
    type="radio"
    class="main-container__checkbox"
    name="main"
    value="second"
    data-url="../img/main.jpg"
  />
  <label for="main-checkbox-2" class="main-container__checkbox-label"
    > </label
  >
  <input
    id="main-checkbox-3"
    type="radio"
    class="main-container__checkbox"
    name="main"
    value="third"
    data-url="../img/main2.jpg"
  />
  <label for="main-checkbox-3" class="main-container__checkboxlabel"> </label>
</div>

How to change a radio button's image when another radio button has been clicked

Your code is ugly. I only updated your work and now it working.

    function changeImage(id, imgName)  {    // reset images  for (var i = document.getElementsByClassName('theimage').length - 1; i >= 0; i--) {    document.getElementsByClassName('theimage')[i].src = "http://i.imgur.com/DGofFGc.png";  }     image = document.getElementById(id);     image.src = imgName;  }

table, th, td {    border: 2px solid black;    border-collapse: collapse;}label > input{ /* HIDE RADIO */  display:none;}label > input + img{ /* IMAGE STYLES */  cursor:pointer;}

<!DOCTYPE html><html><head><title>HTML5, CSS3 and JavaScript demo</title></head><body><form><table border="1">    <tr>        <td><b>B1</b></td>        <td>   <label>        <input type="radio" name="radio1" onClick="changeImage('img1','http://i.imgur.com/QAUUxYF.jpg');">        <img align="center" name="radio1" class="theimage" id="img1" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png"> </input>   </label>         </td>        <td>   <label>        <input type="radio" name="radio1" onClick="changeImage('img2','http://i.imgur.com/QAUUxYF.jpg');">        <img align="center" name="radio2" class="theimage" id="img2" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png"> </input>   </label>         </td>    </tr>    </table></body></html>

---

Related Topics