时间戳

首页 > 解决方案 > 如何动态创建 div 并在复选框更改时调整 div

javascript - 如何动态创建 div 并在复选框更改时调整 div

问题描述

我有点卡在我的问题上，问题是我想创建一个按钮，在该按钮上将呈现宽度为 100% 的 div，在每个 div 或每行 div 中我将有一个复选框，点击框我会得到复选框的值为真或假。

注意：-单击复选框时我将获得此布尔值。

我也在分享我的代码：-

window.onload = function () {
  
  var arrayDiv = [];
  document.getElementById("newsectionbtn").onclick = function (e) {
    e.preventDefault();
    for(var i=0; i <= 1; i++){
        arrayDiv[i] = document.createElement('div');
        arrayDiv[i].id = 'block' + i;
        arrayDiv[i].className = 'block' + i;
    }
    document.body.appendChild(arrayDiv[0].appendChild(arrayDiv[1]));
  };
};
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./script.js"></script>
    <style>
      div {
        height: 200px;
        width: 100%;
        display: flex;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <button id="newsectionbtn">New Section</button>
    <!-- <div id="container">
      <section id="mainsection">
        <input type="checkbox" id="mobile" checked=true  />
      </section>
    </div> -->
  </body>
</html>

我想制作一个满足我条件的算法：-

所以我的用例是：-

这里 t 代表真，f 代表假：-

假设这里isSectionTrue是一个数组，它具有选中或未选中的复选框的布尔值

/*
 * isSectionTrue = [t,t,t]
 * div-1 100%
 * div-2 100%
 * div-3 100%
 *
 * isSectionTrue = [t,f,t]
 * div-1 50%
 * div-2 50%
 * div-3 100%
 *
 * isSectionTrue = [t,f,f]
 * div-1 33%
 * div-2 33%
 * div-3 33%
 *
 *
 * isSectionTrue = [f,t,t]
 * div-1 100%
 * div-2 100%
 * div-3 100%
 * 
 * isSectionTrue = [f,t,t,f,f,f,t,f,t]
 * div1 - 100%
 * div2 - 100%
 * div3 - 25%
 * div4 - 25%
 * div5 - 25%
 * div6 - 25%
 * div7 - 50%
 * div8 - 50%
 * div9 - 100%
 */

标签： javascript

解决方案

作为一个开始：

const arrayDiv = [];

document.getElementById("newsectionbtn").onclick = e =>
  {
  let newDiv = document.createElement('div')
    , chkBx  = document.createElement('input')
    ;
  newDiv.id         = 'block' + arrayDiv.push( newDiv )
  chkBx.type        = 'checkbox' 
  chkBx.dataset.ref = newDiv.id 
  chkBx.onclick     = checkBxClick
 
  document.body.appendChild( newDiv )
  newDiv.appendChild(chkBx)
  }
  
function checkBxClick (e)
  {
  let chkBx = e.target
  console.clear()
  console.log( chkBx.dataset.ref, chkBx.checked )
  }
div {
  height  : 50px;
  width   : 100%;
  display : flex;
  border  : 1px solid black;
}
<button id="newsectionbtn">New Section</button>

推荐阅读