<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #con { display: flex; border: 1px solid #000; margin: 20px auto; width: 600px; } #con div { width: 200px; height: 500px; text-align: center; } #con .left, #con .right { background-color: lightgreen; } #con .change { background-color: lightsalmon; } #con .change button { display: block; margin: 50px auto; } </style> </head> <body> <div id="con"> <div class="left"> <p> <label> <input type="checkbox">left1 </label> </p> <p> <label> <input type="checkbox">left2 </label> </p> <p> <label> <input type="checkbox">left3 </label> </p> <p> <label> <input type="checkbox">left4 </label> </p> <p> <label> <input type="checkbox">left5 </label> </p> </div> <div class="change"> <button class="btnRight">&gt; &gt; &gt; </button> <button class="btnLeft">&lt; &lt; &lt; </button> </div> <div class="right"> <p><label><input type="checkbox">right1</label></p> <p><label><input type="checkbox">right2</label></p> <p><label><input type="checkbox">right3</label></p> <p><label><input Type ="checkbox">right4</label></p> <p><label><input type="checkbox"> Right5 </label></p> </div> </div> <script> // get element var  oLeft = document.querySelector(".left"); var oChange = document.querySelector(".change"); var oRightBtn = oChange.querySelector(".btnRight"); var oLeftBtn = oChange.querySelector(".btnLeft"); var oRight = document.querySelector(".right"); Orightbtn.onclick = function () {var oLeftIps = oleft.querySelectorAll ("input"); / / declare a virtual node type var frag = document. CreateDocumentFragment (); oLeftIps.forEach(function (item, Index) {if (item. Checked) {/ / to the left all the selected elements are added to the virtual node frag. The appendChild (item. ParentNode. ParentNode); // Change the state of the element to unchecked item.checked = false; }}) // Add the left selected element oRight. AppendChild (frag); }; Oleftbtn.onclick = function () {var oRightIps = oRight. QuerySelectorAll ("input"); var frag = document.createDocumentFragment(); oRightIps.forEach(function (item, Index) {if (item. Checked) {/ / all right selected elements added to the virtual node frag. The appendChild (item. ParentNode. ParentNode); // Change the state of the element to unchecked item.checked = false; }}) // Add the element selected on the right to the left oleft.appendChild (frag); }; </script> </body> </html>Copy the code