html - 在 .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>

标签： htmlcsscheckbox

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>