Creating div with img src on checkbox selection

Question

I'm trying to create a change function that creates a div for each checked checkbox selection and also removes the div when it's unchecked.

Inside these new divs I want to send the checkbox's img src as well.

*NOTE** My current JS is as far as I got and the second function only takes the img src from the selected checkbox and sends it to the image with id="loc-selected".

$(".loc-check").change(function(event) {
  var x = $(this).val();

  if ($(this).prop("checked") == true) {} else {}
});

function changeImg(elm) {
  var val = elm.value;
  var img = document.getElementById("img-" + val);
  var src = img.src;
  var imgSelectedRadio = document.getElementById("loc-selected");

  imgSelectedRadio.src = src;
}

#loc-selected {
  height: 50px;
  width: 50px;
}

#loc-checkboxs {
  display: flex;
  padding: 20px;
}

#loc-checkboxs label {
  display: block;
  height: 38px;
  width: 38px;
  cursor: pointer;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loc-checkboxs">
  <label for="usa">
   <input class="loc-check" type="checkbox" id="usa" value="usa" onchange="changeImg(this)"/>
   <span><img id="img-usa" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg"><span>
  </label>
  <label for="canada">
   <input class="loc-check" type="checkbox" id="canada" value="canada" onchange="changeImg(this)"/>
   <span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg"><span>
  </label>
  <label for="uk">
   <input class="loc-check" type="checkbox" id="uk" value="uk" onchange="changeImg(this)"/>
   <span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg"><span>
  </label>
</div>
<div class="new-div-wrapper">
  <div class="new-div">
    <img id="loc-selected"></img>
  </div>
</div>

Possible duplicate of [Using javascript and html to show images when checkboxes are checked](https://stackoverflow.com/questions/7691523/using-javascript-and-html-to-show-images-when-checkboxes-are-checked) — messerbill, Mar 07 '18 at 22:07

Neil · Accepted Answer · 2018-03-07T22:39:15.247

I modified your code to dynamically add items with the same class as the values of the the checkboxes. It then automatically removes it if you uncheck.

$("input.loc-check").change(function(event) {
  var value = $(this).val();
  if ($(this).is(":checked")) {
    $(".new-div-wrapper").append($(this).next().clone().wrapAll("<div class='new-div'></div>").parent().addClass(value));
  } else {
    $(".new-div-wrapper ." + value).remove();
  }
});

#loc-selected {
  height: 50px;
  width: 50px;
}

#loc-checkboxs {
  display: flex;
  padding: 20px;
}

#loc-checkboxs label {
  display: block;
  height: 38px;
  width: 38px;
  cursor: pointer;
  position: relative;
}

.new-div {
  width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loc-checkboxs">
  <label for="usa">
   <input class="loc-check" type="checkbox" id="usa" value="usa"/>
   <span><img id="img-usa" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg" \></span>
  </label>
  <label for="canada">
   <input class="loc-check" type="checkbox" id="canada" value="canada"/>
   <span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg" \></span>
  </label>
  <label for="uk">
   <input class="loc-check" type="checkbox" id="uk" value="uk"/>
   <span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg" \></span>
  </label>
</div>
<div class="new-div-wrapper">
</div>

Thanks Neil. I noticed that when each new div is created the additional items are no longer children of `.new-div-wrapper` so they aren't formatted. Is there a way to make all of the created divs share the same class name (`.new-div`) and then create a combo class for the identifier? — Kyle Underhill, Mar 07 '18 at 22:35

Creating div with img src on checkbox selection

1 Answers1