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

我有点陷入了我的问题，问题是我想创建一个按钮，一个宽度为100%的div将得到渲染，在每个div或div的每一行我都会有一个复选框，单击框我会得到复选框的值，这是真或假

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

我也在分享我的代码：-

window.onload=函数（）{
var arrayDiv=[]；
document.getElementById（“newsectionbtn”）.onclick=function（e）{
e、 预防默认值（）；
对于（var i=0；i

首先：

const arrayDiv=[]；
document.getElementById（“newsectionbtn”）.onclick=e=>
{
让newDiv=document.createElement（'div'）
，chkBx=document.createElement（'input'）
;
newDiv.id='block'+arrayDiv.push（newDiv）
chkBx.type='复选框'
chkBx.dataset.ref=newDiv.id
chkBx.onclick=checkBxClick
document.body.appendChild（newDiv）
newDiv.appendChild（chkBx）
}
函数检查bxclick（e）
{
设chkBx=e.target
控制台清除（）
console.log（chkBx.dataset.ref，chkBx.checked）
}

div{
高度：50px；
宽度：100%；
显示器：flex；
边框：1px纯黑；
}

---

新建部分

您可以这样做

document.getElementById（“newsectionbtn”）.onclick=function（e）{
e、 预防默认值（）；
var div=document.createElement（'div'）；
var contendor=document.getElementById（'container'）；
var numBlock=contendor.childElementCount+1；
div.id='block'+numBlock；
div.className='block'+numBlock；
div.innerHTML=`
`;
附属儿童（分部）；
};
document.querySelector（'input[type=“checkbox”]”）。onclick=（e）=>{
//您可以像这样获得父元素
//var parentElement=e.target.parentElement；
//或
var parentElement=document.querySelector（`${e.target.id.split（'''[1]}'）；
如果（例如，选中目标）{
/*做点什么*/
}否则{
/*做点别的*/
}
}

新章节

我已经做到了：

const arrayDiv=[]；
document.getElementById（“newsectionbtn”）.onclick=e=>
{
让newDiv=document.createElement（'div'）
，chkBx=document.createElement（'input'）
;
newDiv.id='block'+arrayDiv.push（newDiv）
newDiv.className='block'
chkBx.type='复选框'
chkBx.checked=true
chkBx.onclick=checkBoxesSet
document.body.appendChild（newDiv）
newDiv.appendChild（chkBx）
}
函数checkBoxesSet（）
{
设e1=0
，cut=1
;
for（设i=1；i

div{
高度：30px；
宽度：100%；
显示：内联块；
边框：1px纯黑；
框大小：边框框；
}

新章节

提供的代码中唯一的复选框被注释掉了，所以我不确定他们是如何参与其中的。我不知道isSectionTrue的值如何转换为div宽度。你能澄清或缩小问题吗？我试图用每个div呈现复选框。我想要在该布尔值上有一个按钮、复选框或单选按钮吗值将决定，因此以复选框为例，有两个div如果第一个div复选框为true，第二个复选框为false，则两个div将获得50%的宽度，并将在一行中对齐是的，这对于阶段1是正确的，阶段2是当第二个div复选框为true时，其宽度应为100/2，即50%，并将在第一个div行中对齐，如明智的是，如果有三个div，第一个div为假，最后2个div为真，那么没有变化，但情况就是这样[真，假，真]然后100/3即33.33%，最后两个将与第一个div对齐row@Ronak07除了你没有在复选框和维度之间指出任何你的经验法则。至少给出计算公式我们已经实现了它我已经给出了上面的用例基于这个用例我们必须生成公式每个块的eckbox值（true和false）将被推送到数组中，根据这一点，我们必须满足上述用例|*isSectionTrue=[t，f，t]*div-1 50%*div-2 50%*div-3 100%这意味着div1和div2将在一行中对齐，宽度为50%，第三个div将为100%。此输出将基于将在array@Ronak07这是经验，不是算法公式谢谢你是天才@MisterJojo