在.html/.css中选中复选框时如何移动div

<input type="checkbox" id="checkbox">选中复选框时移动div
<div id="movableDiv">要移动的div</div>

var checkbox = document.getElementById('checkbox');
var movableDiv = document.getElementById('movableDiv');

checkbox.addEventListener('change', function() {
  if (checkbox.checked) {
    movableDiv.style.left = '100px'; // 移动div到水平位置100px
    movableDiv.style.top = '100px'; // 移动div到垂直位置100px
  } else {
    movableDiv.style.left = '0'; // 还原div水平位置
    movableDiv.style.top = '0'; // 还原div垂直位置
  }
});

#movableDiv {
  position: relative;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}