Obter valores selecionados de Checkbox

CursoPHP Moderno: Criando uma aplicação com área administrativa

Em várias situações no desenvolvimento Web, é necessário saber se uma coleção de checkbox tem ao menos um valor escolhido, como por exemplo, um sistema de validação ou até mesmo adicionar itens a uma lista.

Há várias formas de se obter os valores “checados” de um formulário, aqui será apresentada uma forma bem simples e eficaz, mas para isto é necessário que você saiba como acessar cada elemento com uma class, se você não souber, não se preocupe, confira nossa matéria “Varrer atributo class usando javascript”, através do link https://satellasoft.com/artigo/javascript/varrer-atributo-class-usando-javascript/amp.

Para verificar se um checkbox esta selecionado, basta verificar qual o valor do atributo checked, através do código elementos[i].checked.

Observe o códigoabaixo, o mesmo esta comentado cada parte do processo.

Código 01:

<!doctype html>
<html lang="pt-br">
    <head>
        <title>Varrer checkbox</title>
        <meta charset="utf-8">
		<script type="text/javascript">
			
			var vetCursos = ["Radiologia", "Medicina", "Nutrição", "Biomedicina", "Farmácia"];
			/*
				Acima criamos vetores com todas as opções disponpiveis para a seleção na mesma ordem que esta no formulário.
				Isto é necessário para evitar usar acentuação no atributo value, do checkbox.
			*/
			
			document.addEventListener("DOMContentLoaded", function(){ //Quando o documento for carregado.
				document.getElementById("btnSelecionar").addEventListener("click", function(){ //Quando houver o clique do botão.
				
					var elementos = document.getElementsByClassName("cbCurso"); //Gravamos na variável todos elementos que contém a class cbCurso.
					
					for(i = 0; i < elementos.length; i++){ //For começando de 0 e vai até a quantidade de elementos encontrado.
						if(elementos[i].checked){ //Verificamos se o elemento esta com o atributo checked ativo, retorna true ou false.
							document.getElementById("selecaoCursos").innerHTML += "<li>"+vetCursos[i]+"</li>"; 
							/*
								Acima inserimos no UL um elemento Li contendo o valor de vetor na mesma posição que tem o valor da variável i.
								
								Se o segundo checkbox for selecionado, então o valor de i é 1 e na posição 1 do vetor é Medicina, a mesma que foi selecionada.
							*/
						}
					}
					
					document.getElementById("btnSelecionar").disabled = "disabled"; //Desativamos o botão.
				});
			});
		</script>
	<head>
	<body>
		<p>Quais cursos são de seu interesse?</p>
		<input type="checkbox" name="cbCurso" value="1" class="cbCurso" /> Radiologia <br />
		<input type="checkbox" name="cbCurso" value="2" class="cbCurso" /> Medicina <br />
		<input type="checkbox" name="cbCurso" value="3" class="cbCurso" /> Nutrição <br />
		<input type="checkbox" name="cbCurso" value="4" class="cbCurso" /> Biomedicina <br />
		<input type="checkbox" name="cbCurso" value="5" class="cbCurso" /> Farmácia <br />
			<br />
		<button id="btnSelecionar">Selecionar</button>
		<br /><hr /><br />
		<ul id="selecaoCursos">
			
		</ul>
	</body>
</html>

Este recurso é muito interessante e útil quando aprendido, pois o desenvolvedor irá utilizar em todos os processos que tem Checkbox e validações.

Qualquer dúvida, deixem nos comentários.