function install() {
const form = document.getElementById('install');
form.addEventListener('submit', (event) => {
event.preventDefault()
});
}
function mostrar(){
var allTags = [];
var ids = document.body.getElementsByTagName('input');
for (var i = 0; i< ids.length; i++) {
allTags.push(ids[i].id);
}
}</head>
<body>
<div class="quiz-container" id="quiz" multiple>
<div class="quiz-header">
<h2 id="question">select the programs you wanted to install: </h2>
<form action="/signup" method="post" id="install">
<ul>
<li>
<input type="checkbox" name="1" id="a" class="answer" />
<label for="a" id="a_text">Teams</label>
</li>
<li>
<input type="checkbox" name="2" id="b" class="answer" />
<label for="b" id="b_text">VPN</label>
</li>
<li>
<input type="checkbox" name="3" id="c" class="answer" />
<label for="c" id="c_text">FDC</label>
</li>
<li>
<input type="checkbox" name="4" id="d" class="answer" />
<label for="d" id="d_text">Acrobat Reader</label>
</li>
<li>
<input type="checkbox" name="5" id="e" class="answer" />
<label for="e" id="d_text">Power BI</label>
</li>
</ul>
</form>
</div>
<button id="submit">Install</button>
</div>
</body>To get IDs of checked input you need to loop to the all input and check with .checked attribute.
document.querySelector('#getIDs').addEventListener('click', function(){
var allTags = [];
document.querySelectorAll('input').forEach(function(input){
if(input.checked){
allTags.push(input.id)
}
})
console.log('IDs:', allTags)
})</head>
<body>
<div class="quiz-container" id="quiz" multiple>
<div class="quiz-header">
<h2 id="question">select the programs you wanted to install: </h2>
<form action="/signup" method="post" id="install">
<ul>
<li>
<input type="checkbox" name="1" id="a" class="answer" />
<label for="a" id="a_text">Teams</label>
</li>
<li>
<input type="checkbox" name="2" id="b" class="answer" />
<label for="b" id="b_text">VPN</label>
</li>
<li>
<input type="checkbox" name="3" id="c" class="answer" />
<label for="c" id="c_text">FDC</label>
</li>
<li>
<input type="checkbox" name="4" id="d" class="answer" />
<label for="d" id="d_text">Acrobat Reader</label>
</li>
<li>
<input type="checkbox" name="5" id="e" class="answer" />
<label for="e" id="d_text">Power BI</label>
</li>
</ul>
</form>
</div>
<button id="getIDs">getIDs</button>
</div>
</body>Move your button inside your form and add correct submit type.
<button type="submit">Install</button>
Then, in your mostrar function you can do:
var selectedTags = document.querySelectorAll('.answer:checked').forEach(function(element) {
console.log(element.id)
});