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

Question

我正在使用.css和.html制作网页，并具有DIV“ RowContainer”，当检查复选框时，我想在DIV中移动，然后如果未选中，则最好移动。另外我计划有很多这样的行，所以我可以给它们单独的名称，以便我可以单独引用它们吗？

编辑：我找到了解决方案，感谢@mplungjan，我在下面添加了对我有用的代码。

            <script type="text/javascript">
                const selected = document.querySelector(".selected");
                const main =    document.getElementById("tablecontainer")
                main.addEventListener("click", function(e) {
                const tgt = e.target;
                if (tgt.classList.contains("move")) {
                    const rowContainer = tgt.closest(".rowcontainer");
                    if (tgt.checked) selected.append(rowContainer)
                    else main.append(rowContainer)
                    }
                })
                selected.addEventListener("click", function(e) {
                const tgt = e.target;
                if (tgt.classList.contains("move")) {
                    const rowContainer = tgt.closest(".rowcontainer");
                    main.append(rowContainer)
                    }
                })
            </script>

.selected{
    margin:auto;
    width: 80%px;
    height: auto;
    min-height: 30px;
    margin-bottom: 1%;
}

#tablecontainer {
    min-height:200px;
}

.rowcontainer {
    margin: auto;
    width: 80%;
    height: 30px;
}

.name {
    line-height: 30px;
    float: left;
    width: 60%;
    height: 100%;
    padding-left: 15px
}

.ako {
    line-height: 30px;
    text-align: center;
    float: left;
    width: 20%;
    height: 100%;
}

.select {
    line-height: 30px;
    text-align: center;
    float: left;
    width: 20%;
    height: 100%;
}

<div id = "selected" class = "selected"></div>
<div id="tablecontainer">
                    <div class = "rowcontainer" style = "background-      color: #e6e6e6;">
                        <div class = "name"><t>Patrick Star</t></div>
                        <div class = "ako"><t>13GWZ</t></div>
                        <div class = "select">
                            <input type = "checkbox" class = "checkbox move">
                        </div>

Answer 1

试试这个

无需命名。但你需要 JavaScript

如果您需要保持订单，则需要列出它们并可能使用数据属性

const selected = document.querySelector(".selected");
const main = document.getElementById("mainContainer")
main.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("move")) {
    const rowContainer = tgt.closest(".rowcontainer"); // the container the checkbox is in
    if (tgt.checked) selected.append(rowContainer)
    else main.append(rowContainer)
  }
})

.selected {
  margin: auto;
  max-width: 800px;
  height: auto;
  min-height: 30px;
  margin-bottom: 1%;
}

.rowcontainer {
  margin: auto;
  width: 80%;
  height: 30px;
}

.name {
  line-height: 30px;
  float: left;
  width: 60%;
  height: 100%;
  padding-left: 15px
}

.ako {
  line-height: 30px;
  text-align: center;
  float: left;
  width: 20%;
  height: 100%;
}

.select {
  line-height: 30px;
  text-align: center;
  float: left;
  width: 20%;
  height: 100%;
}

.checkbox {
  height: 17px;
  width: 17px;
  margin: auto;
  margin-top: 6px;
}

<div id="mainContainer">
  <div class="selected"></div>

  <div class="rowcontainer">
    <div class="name">
      <bt>Name</bt>
    </div>
    <div class="ako">
      <bt>Ako</bt>
    </div>
    <div class="select">
      <bt>Select</bt>
      <input type="checkbox" class="checkbox move">
    </div>
  </div>
</div>

Answer 2

在您的页面上使用此脚本。

 const maindiv = document.querySelector('.selected'); // this is your maindiv 'selected'
        maindiv.style.backgroundColor = 'green';  // colored so that change is visible

        const row = document.querySelector('.rowcontainer'); // this is your row
        row.style.backgroundColor = 'cornflowerblue';   // colored so that change is visible

        const checkbox = document.querySelector('.checkbox');   // this is your checkbox

        window.onload = check;          // this checks if he checkbox is checked or not when page loads up
        checkbox.onclick = check;          // this will check when user click on chekbox

        // the function that does all the work
        function check() {
            if (checkbox.checked) {
                maindiv.appendChild(row);   // it will append your row to maindiv (if chekbox is checked)
            }else{
                document.body.appendChild(row); // it will append your row to the body (if checkbox is not checked)
            }
            
        }