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

Question

我正在尝试创建一个change function ，该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>