我的问题有点棘手，问题是我想创建一个按钮，在这个按钮上，宽度为100%的div将被渲染，在每个div或div的每一行中，我都有一个复选框，单击复选框，我将获得复选框的值，该值为true或false。
注意：-这个布尔值我会得到点击复选框。
我也在分享我的代码：-
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%
*/
我已经做到了：
const arrayDiv = [];
document.getElementById("newsectionbtn").onclick = e =>
{
let newDiv = document.createElement('div')
, chkBx = document.createElement('input')
;
newDiv.id = 'block' + arrayDiv.push( newDiv )
newDiv.className = 'block'
chkBx.type = 'checkbox'
chkBx.checked = true
chkBx.onclick = checkBoxesSet
document.body.appendChild( newDiv )
newDiv.appendChild(chkBx)
}
function checkBoxesSet()
{
let e1 = 0
, cut = 1
;
for (let i = 1; i< arrayDiv.length; ++i)
{
if (!arrayDiv[i].querySelector('input[type=checkbox]').checked)
cut++
else
{
setDivWidth(cut, e1, i)
cut = 1
e1 = i
}
}
setDivWidth(cut, e1, arrayDiv.length)
function setDivWidth(cut, e1, eN)
{
let percent = (100 / cut).toFixed(2)
for( let n = e1; n < eN; ++n) arrayDiv[n].style = `width:${percent}%`;
}
}div {
height : 30px;
width : 100%;
display : inline-block;
border : 1px solid black;
box-sizing : border-box;
}<button id="newsectionbtn" >New Section</button>
<hr>首先：
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>您可以这样做。
document.getElementById("newsectionbtn").onclick = function (e) {
e.preventDefault();
var div = document.createElement('div');
var contenedor = document.getElementById('container');
var numBlock = contenedor.childElementCount + 1;
div.id = 'block' + numBlock;
div.className = 'block' + numBlock;
div.innerHTML = `
<input type="checkbox" id="ckb_block${numBlock}" checked />
`;
contenedor.appendChild(div);
};
document.querySelector('input[type="checkbox"]').onclick = (e) => {
//You can get the parent element like this
//var parentElement = e.target.parentElement;
//or
var parentElement = document.querySelector(`#${e.target.id.split('_')[1]}`);
if(e.target.checked) {
/* Do something */
} else {
/* Do something else */
}
}<body>
<button id="newsectionbtn">New Section</button>
<div id="container"></div>
</body>当你检查一个div时，你会改变样式或添加一个类。这取决于你如何处理它，