change image based on radio button selections

Question

I have some js that changed background images based on what radio button is selected, but I feel like this is a "dirty" way of doing it. Is there a better way to write this for better functionality? Maybe even do it in pure CSS?

<input
            id="main-checkbox-1"
            type="radio"
            class="main-container__checkbox"
            name="main"
            value="first"
            checked
          />
          <label for="main-checkbox-1" class="main-container__checkbox-label"
            >&nbsp;</label
          >
          <input
            id="main-checkbox-2"
            type="radio"
            class="main-container__checkbox"
            name="main"
            value="second"
          />
          <label for="main-checkbox-2" class="main-container__checkbox-label"
            >&nbsp;</label
          >
          <input
            id="main-checkbox-3"
            type="radio"
            class="main-container__checkbox"
            name="main"
            value="third"
          />
          <label for="main-checkbox-3" class="main-container__checkbox-label"
            >&nbsp;</label
          >

document.querySelectorAll(".main-container__checkbox").forEach((item) => {
  item.addEventListener("click", function () {
    if (item.checked && item.getAttribute("value") == "first") {
      document.querySelector(".main-container").style.backgroundImage =
        "url(../img/main3.jpg)";
    }
    if (item.checked && item.getAttribute("value") == "second") {
      document.querySelector(".main-container").style.backgroundImage =
        "url(../img/main.jpg)";
    }
    if (item.checked && item.getAttribute("value") == "third") {
      document.querySelector(".main-container").style.backgroundImage =
        "url(../img/main2.jpg)";
    }
  });
});

Does this answer your question? [Use images instead of radio buttons](https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons) — Mehrzad Tejareh, Oct 18 '20 at 08:05
One way to do that would be to add a `dataset` attribute to the radio buttons that provides the image name. eg, add `data-image="main3.jpg"` for the one with `value="first"` and likewise for the others. Then, in your forEach() loop, you only need to find an item that is checked (and there can only be one in a radio button group) and retrieve the image name using `dataset.image` — ATD, Oct 18 '20 at 08:06

Mamun · Accepted Answer · 2020-10-18T08:47:13.843

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"
    >&nbsp;</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"
    >&nbsp;</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">&nbsp;</label>
</div>

change image based on radio button selections

1 Answers1