7

Tenho o código abaixo em HTML:

<input type="checkbox" id="Pacote_i" name="Pacote" value="Pacote i" onClick="soma()">
<input type="checkbox" id="Pacote_ii" name="Pacote" value="Pacote ii" onClick="soma()">
<input type="checkbox" id="Pacote_iii" name="Pacote" value="Pacote iii" onClick ="soma()">

Preciso pegar os valores desses campos e criar suas respectivas variáveis. Estou tentando com o código abaixo em Javascript, porém não estou conseguindo. Veja:

var pacote = document.getElementsByName('Pacote');
    for (var i = 0; i < pacote.length; i++){
        if ( pacote[i].checked ) {
            if(pacote[i].value == "Pacote i"){
                var Pacote_i = "Pacote UM";
                alert(Pacote_i);
            }else if (pacote[i].value == "Pacote ii") {
                var Pacote_ii = "Pacote DOIS";
                alert(Pacote_ii);
            }else if (pacote[i].value == "Pacote iii") {
                var Pacote_iii = "Pacote TRÊS";
                alert(Pacote_iii);
            }
        }
    }

O código acima está correto?

Obrigado!

5
  • Não entendi o que você quer fazer, do jeito que você fez, quando você seleciona o 1, ele vai criar a variavel 1, se você clicar no 2, vai manter o 1 e o 2, por que os dois estão checkados, se tirar algum ele só vai no que vc mateve checado .. Commented 31/08/2015 às 12:56
  • Sim...exatamente isso que preciso fazer, porém não está funcionando.
    – user24136
    Commented 31/08/2015 às 12:58
  • 1
    claro que está, fiz o teste aqui selecionei o 1ª mostrou o alert pacote UM, selecionei o segundo, mostrou o alert, pacote UM, depois Pacote Dois, removi a seleção do select 1, mostrou pacote DOIS, isso dentro da function (soma) joguei esse seu codigo na função. Commented 31/08/2015 às 13:00
  • Trecho de código publicado abaixo, para seu teste Commented 31/08/2015 às 13:02
  • relacionado, mas utiliza jQuery: pt.stackoverflow.com/a/12995/13561 Commented 31/08/2015 às 13:08

3 Respostas 3

9

function soma(){

  var pacote = document.getElementsByName('Pacote');
    for (var i = 0; i < pacote.length; i++){
        if ( pacote[i].checked ) {
            if(pacote[i].value == "Pacote i"){
                var Pacote_i = "Pacote UM";
                alert(Pacote_i);
            }else if (pacote[i].value == "Pacote ii") {
                var Pacote_ii = "Pacote DOIS";
                alert(Pacote_ii);
            }else if (pacote[i].value == "Pacote iii") {
                var Pacote_iii = "Pacote TRÊS";
                alert(Pacote_iii);
            }
        }
    }
  
}
<input type="checkbox" id="Pacote_i" name="Pacote" value="Pacote i" onClick="soma()">
<input type="checkbox" id="Pacote_ii" name="Pacote" value="Pacote ii" onClick="soma()">
<input type="checkbox" id="Pacote_iii" name="Pacote" value="Pacote iii" onClick ="soma()">

2
  • Tem razão Renan. Está funcionando. Na hora que postei o exemplo aqui, coloquei onClick="soma()" no pacote ii e iii, porém no código não coloquei. Obrigado pela ajuda.
    – user24136
    Commented 31/08/2015 às 13:07
  • 1
    rsrs, sem problemas, disponha. Commented 31/08/2015 às 13:08
8

Você pode usar a função document.querySelectorAll(), que recebe como parâmetro um seletor CSS e retorna os elementos combinados. Utilize o seletor :checked para iterar somente os checkbox marcados.

function getValues() {
  var pacote = document.querySelectorAll('[name=Pacote]:checked');
  var values = [];
  for (var i = 0; i < pacote.length; i++) {
    // utilize o valor aqui, adicionei ao array para exemplo
    values.push(pacote[i].value);
  }
  alert(values);
}

// adicionar ação ao clique no checkbox
var checkboxes = document.querySelectorAll('[name=Pacote]');
for (var i = 0; i < checkboxes.length; i++) {
  // somente nome da função, sem executar com ()
  checkboxes[i].addEventListener('click', getValues, false);
}
<input type="checkbox" id="Pacote_i" name="Pacote" value="Pacote i"/>
<input type="checkbox" id="Pacote_ii" name="Pacote" value="Pacote ii"/>
<input type="checkbox" id="Pacote_iii" name="Pacote" value="Pacote iii"/>


Nota: desconsiderei a alteração do valor, uma vez que não há explicação do motivo dessa mudança.

4

O código esta funciona, o que realmente você quer fazer? Se for apenas pegar os valores dos checkbox marcados você não precisa colocar o "onClick ='soma()'" em cada um, apenas crie um botão, por exemplo, para disparar a ação:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<input type="checkbox" id="Pacote_i" name="Pacote" value="Pacote i">
<br>
<input type="checkbox" id="Pacote_ii" name="Pacote" value="Pacote ii">
<br>
<input type="checkbox" id="Pacote_iii" name="Pacote" value="Pacote iii">
<br>
<button onClick="soma()"> Somar </button>   
 
   
       
<script type="text/javascript">
  function soma(){   
    var pacote = document.getElementsByName('Pacote');
    for (var i = 0; i < pacote.length; i++){
        if ( pacote[i].checked ) {
            if(pacote[i].value == "Pacote i"){
                var Pacote_i = "Pacote UM";
                alert(Pacote_i);
            }else if (pacote[i].value == "Pacote ii") {
                var Pacote_ii = "Pacote DOIS";
                alert(Pacote_ii);
            }else if (pacote[i].value == "Pacote iii") {
                var Pacote_iii = "Pacote TRÊS";
                alert(Pacote_iii);
            }
        }
    }
 }
    </script>
    
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.