Как сделать чтобы выбранные чекбоксы перемещались в другое поле?

Question

Есть набор чекбоксов и нужно чтобы при выборе они перемещались в поле рядом и пропадали в том поле где их выбрали, как такое можно реализовать ?

 function check() {
   var checkboxes = document.getElementsByName("interest");
   var checkboxesChecked = [];
   for (var i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].checked) {
       checkboxesChecked.push(checkboxes[i].value);
     }
   }
   document.getElementById("outOptions").innerHTML = "You choosed: " + checkboxesChecked;
 }

 <form>
   <fieldset>
     <legend>Choose your interests</legend>
     <div>
       <input type="checkbox" id="coding" name="interest" value="coding" />
       <label for="coding">Coding</label>
     </div>
     <div>
       <input type="checkbox" id="music" name="interest" value="music" />
       <label for="music">Music</label>
     </div>
     <div>
       <input type="checkbox" id="art" name="interest" value="art" />
       <label for="art">Art</label>
     </div>
     <div>
       <input type="checkbox" id="sports" name="interest" value="sports" />
       <label for="sports">Sports</label>
     </div>
     <div>
       <input type="checkbox" id="cooking" name="interest" value="cooking" />
       <label for="cooking">Cooking</label>
     </div>
     <div>
       <button type="button" onclick="check()">Check</button>
       <p id="outOptions">You choosed:</p>
     </div>
   </fieldset>
 </form>

Пока что он выводит их просто внизу

Answer 1

Вот примерно так можно сделать.

let checkBoxes = document.getElementsByTagName("input");
let aviableList = document.getElementById("aviable");
let selectedList = document.getElementById("selected");

[...checkBoxes].forEach(item=>item.addEventListener("click", function(){
  if (!this.checked) {
    aviableList.appendChild(this.parentElement);
  } else {
    selectedList.appendChild(this.parentElement);
  }  
}));

<div id="aviable"> aviable list 
 <div id="checkGroup1"><input type="checkbox" id ="1"><label for="1">1</label></div> 
 <div id="checkGroup2"><input type="checkbox" id ="2"><label for="2">2</label></div>
</div>


<div id="selected"> selected list

</div>

БЛОГ НА HUSL

Как сделать чтобы выбранные чекбоксы перемещались в другое поле?

Ответы (1 шт):