GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Javascript - Ler valores dos checkbox que estiverem checkados


#1

Olá
Tenho 9 checkbox com valores diferente e nomes diferente, gostaria de pegar os valores dos checkbox que esitverem checkados.
É possivel fazer isso?

Grato





Item One (1)

Item Two (2)

Item Three (3)

Item Four (4)

Item Five (5)

Item Six (6)

Item Seven (7)

Item Eight (8)

Item Nine (9)
    <input type="button" value="ler valores do checkbox" onclick="contacheckbox();"><p>



#2

Primeiro troque o nome de todos os seus checkbox para o mesmo nome exemplo "item"

var aChk = document.getElementsByName("item");
for (var i=0;i<aChk.lenght;i++){
     if (aChk[i].checked == true){
        //faça isso
        // para pegar o valor é aChk[i].value
     }
}

#3

<script language="javascript">
    // essa função recebe o nome "comun" ao checkboxes e a quantidade dos mesmos
    function verificar( nome, quantidade ) {
		saida = "Os checkboxes checados são:";
		// itera baseado na quantidade de elementos
		for ( i = 0; i < quantidade; i++ ) {
		    // obtém cada elemento pelo id
		    checkBox = document.getElementById( nome + ( i + 1 ) );
		    // se o checkbox estiver marcado, adiciona mais uma linha na string de saida.
		    if ( checkBox.checked ) {
		        saida += "\n" + checkBox.value;
		    }
		}
		// mostra a saída
		alert( saida );
	}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
  <label>
  <input name="item1" type="checkbox" id="item1" value="1" />
Item 1</label>
  <br />
  <label>
  <input name="item2" type="checkbox" id="item2" value="2" />
Item 2</label>
  <br />
  <label>
  <input name="item3" type="checkbox" id="item3" value="3" />
Item 3</label>
  <br />
  <label>
  <input name="item4" type="checkbox" id="item4" value="4" />
Item 4</label>
  <br />
  <label>
  <input name="item5" type="checkbox" id="item5" value="5" />
Item 5</label>
  <br />
  <label>
  <input name="item6" type="checkbox" id="item6" value="6" />
Item 6</label>
  <br />
  <label>
  <input name="item7" type="checkbox" id="item7" value="7" />
Item 7</label>
  <br />
  <label>
  <input name="item8" type="checkbox" id="item8" value="8" />
Item 8</label>
  <br />
  <label>
  <input name="item9" type="checkbox" id="item9" value="9" />
Item 9</label>
  <p>
    <input type="submit" name="btn" id="btn" value="Verificar Checados" onclick="verificar( 'item', 9 )"/>
  </p>
</form>
</body>
</html>

Até mais!

PS. Editei, faltou comentar o código


#4

Olá,...

Para não ter de identificar os checkbox com nomes parecidos, tipo,... item1, item2...

vc pode fazer da seguinte forma:

function obterMarcados() {
  var listaMarcados = document.getElementsByTagName("INPUT");
  for (loop = 0; loop < listaMarcados.length; loop++) {
     var item = listaMarcados[loop];
     if (item.type == "checkbox" && item.checked) {
       alert(item.id);
     }
  }
}

Caso seus checkbox estejam sobre um container ... como div, td ... você pode usar o id deste controle no lugar de document para restringir os inputs que serão retornados pelo método getElementsByTagName();

Tipo:
var minhaDiv = document.getElementById("checkDiv");

a linha ficaria assim: minhaDiv.getElementsByTagName("INPUT");

Espero ter ajudado...


#5

Pessoal sou novo na area e quero aprender a usar o javascript. Preciso de um script para que ao clicar no não, desabilitasse ou summisse ou ficasse indisponivel, as demais opções.
alguem tem alguma ideia/?

segue o html para terem uma ideia.

 <input name="median" type="checkbox" id="median" value="Não">
    Não
<input name="mediapen" type="checkbox" id="mediapen" value="Pendrive">
    Pen Drive
    <input name="mediacd" type="checkbox" id="mediacd" value="CD">
    CD
    <input name="mediarw" type="checkbox" id="mediarw" value="CDRW">
    CDRW
    <input name="mediadvd" type="checkbox" id="mediadvd" value="DVD">
    DVD
    <input name="mediadvdrw" type="checkbox" id="mediadvdrw" value="DVDRW">
    DVDRW
    <input name="mediatodos" type="checkbox" id="mediatodos" value="Todos">
    Todos </span> </div>

#6

Essa função habilita o botão 'median':

function habilita(){
   document.getElementById("median").style.display = "block";
}

Essa aqui desabilita o botão 'median':

function desabilita(){
   document.getElementById("median").style.display = "none";
}

#7

legal, entao crio um If? para desabilitar?


#8

O melhor seria mesmo se fosse dinâmico, aonde você lê-se do BANCO os dados a serem carregados... Populando logo após carrega-los.
Retornando do SERVIDOR , um XML ou um JSON por exemplo... Daí varia muito de como você estrutura seu sistema!

Isto é apenas uma 'dica'. :wink:


#9

se você quer marca só uma opção o melhor seria utilizar um radiobutton

agora eu tenho uma lista com muitas li
criei a função
selecionar todos
de-selecionar todos

adicionei um link no final de cada li
e gostaria de uma função que quando clicar no link só aquele checkbox fique selecionado alguém da uma dica de como fazer isso


#10

Bom gente aproveitando esse código que ta aqui to tentando fazer o seguinte, ao invés de mostrar qual célula esta marcada no alert , mostrar o conteúdo da tabela marcada no alert:

<html>
<head>
<script language="javascript">
    // essa função recebe o nome "comun" ao checkboxes e a quantidade dos mesmos
    function verificar( nome, quantidade ) {
		saida = "Somente os dados dos produtos cujo respectivo objeto checkbox, esteja selecionado";
		// itera baseado na quantidade de elementos
		for ( i = 0; i < quantidade; i++ ) {
		    // obtém cada elemento pelo id
		    checkBox = document.getElementById( nome + ( i + 1 ) );
		    // se o checkbox estiver marcado, adiciona mais uma linha na string de saida.
		    if ( checkBox.checked ) {
		        saida += "\n" + checkBox.value;
		    }
		}
		// mostra a saída
		alert( saida );
	}
</script>
</head>
<body align="center"> <b> TABELA DE PRECOS</B> </BR>
<form id="form1" name="form1" method="post" action="">
<table border="1" align="center">
<tr><td> <b>CODIGO</B></td>
	<td> <b>DESCRICAO</b></td>
	<td> <b>PRECO</b></td>
	<td> <b>SELCIONE</b></td>
<tr>
<tr>
  <td align="center"> 1-7</td>
  <td align="right"> no-break 700 va </td>
  <td align="center"> 249,00 </td>  
  <td align="center">  <input name="item1" type="checkbox" id="item1" value="1" /></td>
</tr>
<tr>
  <td align="center"> 2-4 </td>
  <td align="right"> monitor 23" led</td>
  <td align="center"> 460,00 </td>  
  <td align="center">  <input name="item2" type="checkbox" id="item2" value="2" /></td>
</tr>
<tr>
  <td align="center"> 3-1 </td>
  <td align="right"> mouse sem fio <td>  
  <td align="center"> 45,00 </td>  
  <td align="center"> <input name="item3" type="checkbox" id="item3" value="3" /></td>
</tr>
</table>
<a href="javascript:verificar( 'item', 3 );"> Mostrar células </a>
</form>
</body>
</html>

#11