在复选框选择时使用 img src 创建 div

Question

我正在尝试创建一个change function，为每个选中的checkbox选择一个div，并在未选中时删除div。

在这些新的div中，我也想发送复选框的img src。

*注意**我目前的JS是我得到的，第二个函数仅从选定的复选框中获取img src并将其发送到带有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>

Answer 1

我修改了您的代码以动态添加与复选框值具有相同类的项目。 然后，如果您取消选中，它会自动将其删除。

$("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>