Exercício de Programação #14 - Javascript - Manipulando de Múltiplos Checkbox
24/08/2023Hoje apresentamos um exercício de Javascript para manipulação de múltiplos checkbox exibindo para o usuário final o resultado dos checkbox selecionados.
Múltiplos Checkbox com JS
Para selecionarmos múltiplos checkbox no Javascript utilizaremos o método querySelectorAll().
index.html
Primeiramente criaremos o formulário com os checkbox e com o button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="result" style="margin-bottom: 30px;"></div>
<input type="checkbox" name="categorias[]" class="categorias" value="Ação"> Ação <br>
<input type="checkbox" name="categorias[]" class="categorias" value="Terror"> Terror <br>
<input type="checkbox" name="categorias[]" class="categorias" value="Ficção"> Ficção <br>
<button id="testCheckbox">Testar</button>
<script src="javascript.js"></script>
</body>
</html>javascript.js
Posteriormente faremos a mágina no Javascript, para verificar os checkbox checked e exibir os resultados:
(function(win,doc){
'use strict';
if(doc.querySelector('#testCheckbox')){
let btn = doc.querySelector('#testCheckbox');
let div = doc.querySelector('#result');
btn.addEventListener('click',()=>{
let checkboxs = doc.querySelectorAll('.categorias');
let html = 'As ações clicadas foram: <br>';
for(let i=0; i<checkboxs.length; i++){
if(checkboxs[i].checked){
html += checkboxs[i].value+'<br>';
}
}
div.innerHTML = html;
});
}
})(window,document);Então foi isso, por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!
Precisa de suporte? webdesignemfoco@gmail.com
Posts Relacionados
Exercício de Programação #13 - Javascript - Manipulando Strings
Nesse tutorial faremos um exercício de Javascript onde trabalharemos com manipulação de strings, separando partes que desejamos com regex.
Exercício de Programação #15 - CSS - Posicionamento de Divs
A ideia deste exercício é posicionar quatro divs nos extremos de uma página html. O foco é treinar a habilidade do posicionamento de divs em um sistema.
ExercÃcios
Nessa playlist aprenderemos na prática a programar, utilizando para isso exercÃcios de programação nas mais variadas linguagens e tecnologias.