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

Question

我正在尝试创建Map<MyObject, List<String>> map = new HashMap<>(); list.forEach(item -> map.put(item, new ArrayList<>())); ，为每个已选中 change function选项创建div，并在未选中时删除div

在这些新div中，我想发送复选框checkbox。

*注意**我当前的JS是我所获得的，第二个函数只从所选复选框中取img src并将其发送到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;
}

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>