Javascript 选中复选框时使用img src创建div

我正在尝试创建一个

更改函数

，该函数为每个选中的复选框创建一个

div

，并在未选中时删除该div

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

imgsrc

*注意**我当前的JS是我得到的，第二个函数只从选中的复选框中获取

img src

，并将其发送到带有

id=“loc selected”

的图像

$（“.loc check”）.change（函数（事件）{
var x=$（this.val（）；
if（$（this.prop（“checked”）==true）{}else{}
});
功能更改IMG（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{
高度：50px；
宽度：50px；
}
#loc复选框{
显示器：flex；
填充：20px；
}
#loc复选框标签{
显示：块；
高度：38px；
宽度：38px；
光标：指针；
位置：相对位置；
}

---

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

$（“input.loc check”）.change（函数（事件）{
var值=$（this.val（）；
如果（$（this）.is（“：checked”））{
$（“.new div wrapper”）.append（$（this.next（）.clone（）.wrapAll（“”.parent（）.addClass（value））；
}否则{
$（.new div wrapper.+value）.remove（）；
}
});
#已选择loc{
高度：50px；
宽度：50px；
}
#loc复选框{
显示器：flex；
填充：20px；
}
#loc复选框标签{
显示：块；
高度：38px；
宽度：38px；
光标：指针；
位置：相对位置；
}
.新分区{
宽度：100px；
}

Thank Neil的可能副本。我注意到，当创建每个新div时，附加项不再是
.new div wrapper
的子项，因此它们没有格式化。有没有办法让所有创建的div共享相同的类名（
.new div
），然后为标识符创建一个组合类？@KyleUnderhill更新。