Obter valores selecionados de Checkbox

Gunnar CorreaGunnar Correa06/05/2015 às 02:47:43 - 9.331 acessos

Obter valores de input checkbox é muito simples quando utilizamos o Javascript.


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.

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.

Obtendo valores de checkbox selecionados com Javascript

Qualquer dúvida, deixem nos comentários.


javascript html programação formulário class checkbox desenvolvimento web tutorial javascript input type javascript checkbox obtendo valores com javascript

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Comentários

1 / 8