javascript - 在复选框选择上使用 img src 创建 div

Question

我正在尝试创建一个更改函数，为每个选中复选框选择创建一个div，并且当 未选中时，还会删除 div。

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

*注意** 我当前的 JS 就我所知，第二个函数仅从选定的复选框中获取 img src 并将其发送到带有 id="loc 的图像- 已选择”。

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