Calculadora

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.