选中复选框时如何将图像从一个div移动到另一个div答案

【问题标题】：How to move images from one div to another when checkbox is checked javascript选中复选框时如何将图像从一个div移动到另一个div
【发布时间】：2020-09-07 09:23:57
【问题描述】：

我想知道如何在选中复选框时使用 JavaScript 将图像从一个 div 移动到另一个。选中复选框时，它们都应该在 div class="ekran" 中，但同时如果您选中另一个复选框，则前一个未选中并且前一个图像应该消失。我一直在尝试解决这个问题，但似乎找不到任何解决方案。所以，如果你有一些想法......

window.addEventListener('load', start, false);


function start() {
    
    var slike = document.getElementsByTagName('img');
    var ekran = document.getElementsByClassName('ekran')[0];
    document.body.addEventListener('click', menjaj, false);

    function menjaj(e) {
         var img = document.createElement('img'); 
         img.src = slike.src;
         ekran.innerHTML = ''; 
         ekran.appendChild(img);   

    }
    
}

<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/skript.js"></script>
</head>
<body>
<div class="omotac">
    <div>

          <label><input type="checkbox" name="odabir"><img src="slike/leto1.jpg" alt="leto1"></label>
          <label><input type="checkbox" name="odabir"><img src="slike/leto2.jpg" alt="leto2"></label>
          <label><input type="checkbox" name="odabir"><img src="slike/leto3.jpg" alt="leto3"></label>
          <label><input type="checkbox" name="odabir"><img src="slike/leto4.jpg" alt="leto4"></label>
         
         
    </div>
    
    <div class="ekran"></div>
</div>
</body>
</html>

【问题讨论】：

您的问题有些不清楚，根据您在此处提供的代码，它不适用于您可能正在寻找的结构，请您更具体地说明您想要做什么?你想一次移动一个图像还是每个选定的图像？请尝试解释更多..
我试图在选中该图像上方的复选框时一次仅移动一个图像，并且我想将它们移动到 div class="ekran"，因此如果选中一个复选框，则图像下面是 div ekran，如果我选中其他复选框，新图像应该在 div ekran。我知道我可能应该使用单选按钮，但我想要复选框。 @凯

标签： javascript html image checkbox

【解决方案1】：

您可以通过为要将图像复制到的 div 设置目标来使用附加内部 html。

这就是它的行

target.innerHTML += document.getElementById(checked).parentElement.innerHTML

这是您代码的工作版本。

function myFunction(checked) {
console.log ("checked is ", checked)
  // Get the checkbox
  var checkBox = document.getElementById(checked);
  var target = document.getElementById('target')
  // If the checkbox is checked, move the image
  if (checkBox.checked == true){

  
  target.innerHTML += document.getElementById(checked).parentElement.innerHTML
    //remove one line below if you do not want to hide div from source
  checkBox.parentElement.innerHTML='';
  }
}

<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/skript.js"></script>
</head>
<body>
<div id="source" class="omotac">
    <div>

          <label><input id="c1" onclick=myFunction("c1")   type="checkbox" name="odabir"><img src="slike/leto1.jpg" alt="leto1"></label>
          <label><input id="c2" onclick=myFunction("c2")  type="checkbox" name="odabir"><img src="slike/leto2.jpg" alt="leto2"></label>
          <label><input id="c3" onclick=myFunction("c3")  type="checkbox" name="odabir"><img src="slike/leto3.jpg" alt="leto3"></label>
          <label><input id="c4" onclick=myFunction("c4")  type="checkbox" name="odabir"><img src="slike/leto4.jpg" alt="leto4"></label>
         
         
    </div>
    
    <div class="ekran">
    <h1>This is target div </h1>
    <div id="target"> </div>
    </div>
</div>
</body>
</html>

【讨论】：

@Alex 如果这解决了您的问题，请考虑接受作为答案。