JS.DOM.AccessHtml.SelectingCheckbox
function displayListOfCheckedItems() {
// all inputs that have been checked
var listOfSelectedValues="";
var list = document.querySelectorAll("#fruits input:checked");
list.forEach(function(elm) {
listOfSelectedValues += elm.value + " ";
// Put the li in red.
// the li is the parent of the current input elem stored
// in the elm variable
elm.parentNode.style.color = 'green';
});
document.body.append("You selected: " + listOfSelectedValues);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>querySelector and querySelector example 1</title>
</head>
<body>
<button onclick="displayListOfCheckedItems();">Show Checked items</button>
<br>
<ul id="fruits">
<li>
<input type="checkbox" name="fruit" value="apples">Apples
</li>
<li>
<input type="checkbox" name="fruit" value="oranges">
Oranges
</li>
<li>
<input type="checkbox" name="fruit" value="bananas">
Bananas
</li>
<li>
<input type="checkbox" name="fruit" value="grapes">
Grapes
</li>
</ul>
</body>
</html>