Calculadora

[Rodrigo5468 0]

HTML

<input type="checkbox" id="num1" value="10"/>
<br/>
<input type="checkbox" id="num2" value="20"/>
<br/><br/>
<input type="submit" onclick="calcula();" value="Calcular"/>
<br/><br/><br/>
<div id="resultado"></div>

JAVASCRIPT

function calcula(){
	var num1 = document.getElementById("num1").value;
	var num2 = document.getElementById("num2").value;
	
	var resultado = parseInt(num1)+parseInt(num2);
	
	var calc = document.getElementById("resultado");
	calc.innerHTML = resultado;
	calc.style.display = 'inline';
}

Quando clicar no primeiro checkbox eu quero que apareça o resultado 10 ou no segundo checkbox aparecer o resultado 20. Marcando os dois checkbox deverá somar os checkbox's marcados, trazendo o resultado 30. Mas não está funcionando, não estou entendendo... era para funcionar. Alguém pode me falar onde está o erro e como posso arrumar?

Obrigado.

[Gabriel Heming 766]

Veja os logs do console (CTRL + Shift + J), pode estar ocorrendo algum em alguma parte do javascript.

[itlpps 109]

Você está pegando o valor de ambos, sem verificar se está ou não checado... Sempre vai mostrar 30.

[Rodrigo5468 0]

JAVASCRIPT

function calcula(){
	if(jQuery("input[type='checkbox']").is(':checked')){
		var num1 = document.getElementById("num1").value;
		var num2 = document.getElementById("num2").value;
		
		var resultado = parseInt(num1)+parseInt(num2);
		
		var calc = document.getElementById("resultado");
		calc.innerHTML = resultado;
		calc.style.display = 'inline';
	}
}

Fiz a verificação mais não deu certo, onde estou errando? E o que tenho que fazer?

Obrigado.

[William Bruno 1501]

assim:

<input type="checkbox" id="num1" value="10"/> 10 <br/>
<input type="checkbox" id="num2" value="20"/> 20 <br/>

<br/>
<input type="submit" onclick="calcula();" value="Calcular"/>

<br/><br/><br/>
<div id="resultado"></div>


<script>
var $num1 = document.getElementById('num1'),
    $num2 = document.getElementById('num2'),
    $target = document.getElementById('resultado');

function calcula(){
  var v1 = $num1.checked ? $num1.value : 0,
      v2 = $num2.checked ? $num2.value : 0;

  $target.innerHTML = parseInt(v1) + parseInt(v2);
  $target.style.display = 'inline';
}
</script>

[Rodrigo5468 0]

William muito obrigado... Deu certo, mas tem um problema. Eu tenho cerca de 200 checkbox's com value diferentes. Eu tentei adicionar um name igual em todos os checkbox's mas não resolveu, olhe.

<input type="checkbox" name="check" value="10"/> 10 <br/>
<input type="checkbox" name="check" value="20"/> 20 <br/>
<input type="checkbox" name="check" value="30"/> 30 <br/>
<input type="checkbox" name="check" value="40"/> 40 <br/>
<input type="checkbox" name="check" value="50"/> 50 <br/>
<input type="checkbox" name="check" value="60"/> 60 <br/>

<br/>
<input type="submit" onclick="calcula();" value="Calcular"/>

<br/><br/><br/>
<div id="resultado"></div>


<script>
var $num1 = document.getElementsByName('check'),
	$target = document.getElementById('resultado');
	
function calcula(){
	var v1 = $num1.checked ? $num1.value : 0;
	
	$target.innerHTML = parseInt(v1);
	$target.style.display = 'inline';
}
</script> 

Em vez de adicionar o valor 0 se não tiver marcado nenhum checkbox tem como fazer um alert dizendo que nenhum foi marcado e quando tiver marcado mostrar na div resultado?

Espero por sua explicação.

[William Bruno 1501]

assim:

<label><input type="checkbox" name="checks[]" value="10"/> 10 </label><br/>
<label><input type="checkbox" name="checks[]" value="20"/> 20 </label><br/>
<label><input type="checkbox" name="checks[]" value="30"/> 30 </label><br/>
<label><input type="checkbox" name="checks[]" value="40"/> 40 </label><br/>
<label><input type="checkbox" name="checks[]" value="50"/> 50 </label><br/>
<label><input type="checkbox" name="checks[]" value="60"/> 60 </label><br/>

<br/>
<input type="submit" onclick="calcula();" value="Calcular"/>

<br/><br/><br/>
<div id="resultado"></div>


<script>
var $checks = document.querySelectorAll('input[name="checks[]"]'),
    $target = document.getElementById('resultado');

$checks = [].slice.call($checks);

function calcula(){
    var sum = 0;

    $checks.forEach(function(check) {
        sum += check.checked ? parseInt(check.value, 10) : 0;
    });

    if (sum === 0) {
        alert('Selecione algum checkbox');
    } else {
        $target.innerHTML = sum;
        $target.style.display = 'inline';
    }
}
</script>