Get checkbox values with javascript

Asked

Viewed 27,643 times

7

I have the code below 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 take the values of these fields and create their respective variables. I’m trying with 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);
            }
        }
    }

The code above is correct?

Thank you!

javascript

  • I don’t understand what you want to do, the way you did, when you select the 1, it will create the variable 1, if you click on the 2, will keep the 1 and the 2, why both are checked, if you take some it only goes in what you mateve checked ..

  • Yes...exactly what I need to do, but it’s not working.

  • 1

    of course it is, I made the test here I selected the 1st showed the Alert package ONE, selected the second, showed the Alert, package ONE, then Package Two, removed the selection of select 1, showed package TWO, that inside the Function (sum) played that its code in the function.

  • Code snippet published below for your test

  • related, but uses jQuery: http://answall.com/a/12995/13561

3 answers

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()">

  • You’re right Renan. It’s working. When I posted the example here, I put onClick="soma()" in package ii and iii, but in the code I did not put. Thanks for the help.

  • 1

    rsrs, no problems, dispose.

8

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

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 change in value, as there is no explanation for the reason for this change.

4

The code this works, what do you really want to do? If you just take the values of the checkbox marked you do not need to put the "onClick ='soma()'" on each one, 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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.