I am trying to get all checked checkboxes and create li elements with them. I want the li elements to show up as soon as the checkboxes are checked. And can I do that without using value attribute in input? I already looked up there is a way to do that with value but that doesn't work with my code.
I have this code
const checkboxes = document.getElementsByTagName('input').type == 'checkbox';
function getChecked() {
let checked = [];
for (let i = 0; i < checkboxes.length; i ) {
let checkbox = checkboxes[i];
if (checkbox.checked) {
const rightBox = document.getElementsByClassName('main-container-2')[0];
const newDiv = document.createElement('div');
rightBox.appendChild(newDiv);
const ul = document.createElement('ul');
newDiv.appendChild(ul);
const li = document.createElement('li');
ul.appendChild(li);
const label = document.createElement('label');
li.innerHTML = label.innerHTML;
}
}
return checked;
};
getChecked();
<div >
<div >
<div>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Onion</label>
</div>
<div>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Spring Onion</label>
</div>
<div>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">Egg</label>
</div>
</div>
</div>
CodePudding user response:
Your checkboxes select was wrong, so I fixed it in the first place.
You should add a onclick
function to all of your checkboxes.
Inside that function you should empty the list and loop trough all checkboxes.
When a checkbox is checked, then add a li
to your list.
The code below works.
const checkboxes = document.querySelectorAll('input[type=checkbox]');
function getChecked() {
let checked = [];
const ul = document.getElementById('ingredients');
ul.innerHTML = "";
for (let i = 0; i < checkboxes.length; i ) {
let checkbox = checkboxes[i];
if (checkbox.checked) {
const li = document.createElement('li');
li.innerHTML = document.querySelector('label[for="' checkbox.id '"]').textContent.trim();
ul.appendChild(li);
}
}
return checked;
};
<div >
<div >
<div>
<input type="checkbox" onclick="getChecked()" id="checkbox1">
<label for="checkbox1">Onion</label>
</div>
<div>
<input type="checkbox" onclick="getChecked()" id="checkbox2">
<label for="checkbox2">Spring Onion</label>
</div>
<div>
<input type="checkbox" onclick="getChecked()" id="checkbox3">
<label for="checkbox3">Egg</label>
</div>
</div>
</div>
<br/>
your ingredients
<ul id="ingredients">
</ul>
CodePudding user response:
I give you an example for your reference:
document.addEventListener("DOMContentLoaded", function(event) {
const checkBoxes = document.querySelectorAll("input[type=checkbox]");
for (let i = 0; i < checkBoxes.length; i ) {
let checkBox = checkBoxes[i];
checkBox.addEventListener("click", e => {
if (e.target.checked) {
const rightBox = document.getElementsByClassName('main-container-2')[0];
const newDiv = document.createElement('div');
rightBox.appendChild(newDiv);
const ul = document.createElement('ul');
newDiv.appendChild(ul);
const li = document.createElement('li');
ul.appendChild(li);
let l=e.target.nextElementSibling;
li.innerHTML = l.innerHTML;
}
});
}
});
<div >
<div >
<div>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Onion</label>
</div>
<div>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Spring Onion</label>
</div>
<div>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">Egg</label>
</div>
</div>
</div>
<div >
</div>