Get checkbox values with javascript

Navigation
5

I have the following code in 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()">

I need to get the values of these fields and create their respective variables. I'm trying the code below in Javascript, but I'm not getting it. See: 

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);
            }
        }
    }

Is the above code correct?

Thank you!

    
asked by anonymous 31.08.2015 / 14:48

3 answers

8

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()">
    
31.08.2015 / 15:02
7

You can use the document.querySelectorAll() function, which you receive as a parameter a CSS selector and returns the combined elements. Use the :checked selector to iterate only the checkbox checked. 

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"/>

Note : I disregarded the value change, since there is no explanation for the reason for this change.

    
31.08.2015 / 15:05
3

The code works, what do you really want to do? If you just get the values of checked checkboxes you do not need to put the 'onClick =' sum () '' in each, just create a button, for example to trigger the action: 

<!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>
    
31.08.2015 / 15:08
How many days are left for a date [duplicate] How to fire multiple exceptions?