Checkbox

JM Pessanha · January 19, 2012

Olá, estou iniciando com JS e nos últimos dias comecei a elaborar uma ferramenta para um jogo. Basicamente, há várias checkbox na ferramente e eu gostaria que fosse exibido num campo os valores das checkbox que forem ativadas.

No código que criei, eu marco uma checkbox, porém o resultado é a soma de todas as outras. Se alguém puder me ajudar. O que eu gostaria é que ao marcar apenas uma, fosse exibido o valor referente aquela checkbox. Caso fosse marcado mais de uma, os valores fossem somados, divido por 50 e exibido no input.

É complicado explicar, mas espero que tenham entendido.

Obs: No campo onde será exibido o resultado, o valor da checkbox é dividido por 50.

<form name="Calc">
<table font="arial" style="text-align: center; width: 680px;" border="1" bordercolor="#d8c08c" cellpadding="2" cellspacing="0" bgcolor="#fae0ae">
<tr>
<td colspan="4" align="center">
<b>Exemplo - Calculadora de Generais</b>
</td>
</tr>
<tr align="center">
<td colspan="4">Aqui colocarei as instruções de utilização da ferramenta</td>
</tr>
<tr>
<td><br>
<span style="color:white;border:2px solid #d8c08c; background: #7b3b0a;border-radius:10px"> Econômia </span>
<br>
<br>
<div align="left">
<input type="checkbox" name="option1" value="12"> Conservação<br>
<input type="checkbox" name="option2" value="24"> Roldana<br>
<input type="checkbox" name="option3" value="112"> Riqueza<br>
<input type="checkbox" name="option4" value="336"> Cultura de Vinho<br>
<input type="checkbox" name="option5" value="1.024"> <small><small>Recolha de Recursos Melhorada</small></small><br>
<input type="checkbox" name="option6" value="2.236"> Geometria<br>
<input type="checkbox" name="option7" value="3.672"> Arquitectura<br>
<input type="checkbox" name="option8" value="7.200"> Dia de Descanso<br>
<input type="checkbox" name="option9" value="8.242"> Legislação<br>
<input type="checkbox" name="option10" value="10.764"> <small>Especialidades de Culinária</small><br>
<input type="checkbox" name="option11" value="19.908"> Mãos Auxiliares<br>
<input type="checkbox" name="option12" value="25.632"> Nível da Água<br>
<input type="checkbox" name="option13" value="48.000"> Caves de Vinho<br>
<input type="checkbox" name="option14" value="48.000"> Depósito<br>
<input type="checkbox" name="option15" value="106.560"> Burocracia<br>
<input type="checkbox" name="option16" value="241.200"> Utopia<br>
<input type="checkbox" name="option17" value="532.800"> Futuro Económico<br>
</div>
<br>
</td>
<td><br>
<span style="color:white;border:2px solid #d8c08c; background: #7b3b0a;border-radius:10px"> Navegação Marítima </span>
<br>
<br>
<div align="left">
<input type="checkbox" name="option18" value="8"> Carpintaria<br>
<input type="checkbox" name="option19" value="12"> Convés de Armas<br>
<input type="checkbox" name="option20" value="24"> <small>Manutenção dos Barcos</small><br>
<input type="checkbox" name="option21" value="24"> Projecto<br>
<input type="checkbox" name="option22" value="336"> Expansão<br>
<input type="checkbox" name="option23" value="1.032"> Culturas Estrangeiras<br>
<input type="checkbox" name="option24" value="2.236"> Piche<br>
<input type="checkbox" name="option25" value="3.264"> Mercado<br>
<input type="checkbox" name="option26" value="7.020"> Fogo Grego<br>
<input type="checkbox" name="option27" value="9.936"> Contrapeso<br>
<input type="checkbox" name="option28" value="17.064"> Diplomacia<br>
<input type="checkbox" name="option29" value="25.632"> Cartas Marítimas<br>
<input type="checkbox" name="option30" value="38.400"> Roda d'Água<br>
<input type="checkbox" name="option31" value="53.000"> Calafetagem<br>
<input type="checkbox" name="option32" value="93.240"> Anexo de Morteiro<br>
<input type="checkbox" name="option33" value="120.000"> Aríete Maciço<br>
<input type="checkbox" name="option34" value="475.000"> Base no Mar<br>
<input type="checkbox" name="option35" value="532.800"> Futuro da Navegação<br>
</div>
</td>
<td><br>
<span style="color:white;border:2px solid #d8c08c; background: #7b3b0a;border-radius:10px"> Ciência </span>
<br>
<br>
<div align="left">
<input type="checkbox" name="option36" value="24"> Poço Artesiano<br>
<input type="checkbox" name="option37" value="30"> Papel<br>
<input type="checkbox" name="option38" value="420"> Espionagem<br>
<input type="checkbox" name="option39" value="1.428"> Politeísmo<br>
<input type="checkbox" name="option40" value="2.652"> Tinta<br>
<input type="checkbox" name="option41" value="2.836"> Formação de Governo<br>
<input type="checkbox" name="option42" value="4.320"> Invenções<br>
<input type="checkbox" name="option43" value="8.694"> Intercâmbio Cultural<br>
<input type="checkbox" name="option44" value="14.952"> Anatomia<br>
<input type="checkbox" name="option45" value="21.360"> Óptica<br>
<input type="checkbox" name="option46" value="21.360"> Ensaios<br>
<input type="checkbox" name="option47" value="31.968"> Caneta Mecânica<br>
<input type="checkbox" name="option48" value="46.848"> Pássaros Voadores<br>
<input type="checkbox" name="option49" value="144.720"> <small>Tubo de Correio a Vácuo</small><br>
<input type="checkbox" name="option50" value="202.074"> Religião do Estado<br>
<input type="checkbox" name="option51" value="209.880"> Câmara de Pressão<br>
<input type="checkbox" name="option52" value="444.000"> <small>O Princípio de Arquimedes</small><br>
<input type="checkbox" name="option53" value="610.560"> Futuro Científico<br>
</div>
</td>
<td><br>
<span style="color:white;border:2px solid #d8c08c; background: #7b3b0a;border-radius:10px"> Militar </span>
<br>
<br>
<div align="left">
<input type="checkbox" name="option54" value="8"> Doca<br>
<input type="checkbox" name="option55" value="24"> Mapas<br>
<input type="checkbox" name="option56" value="336"> Exército Profissional<br>
<input type="checkbox" name="option57" value="1.032"> Cerco<br>
<input type="checkbox" name="option58" value="2.236"> Código de Honra<br>
<input type="checkbox" name="option59" value="3.264"> Balística<br>
<input type="checkbox" name="option60" value="7.020"> Lei da Alavanca<br>
<input type="checkbox" name="option61" value="11.592"> Governador<br>
<input type="checkbox" name="option62" value="19.908"> Pirotecnia<br>
<input type="checkbox" name="option63" value="25.632"> Logística<br>
<input type="checkbox" name="option64" value="38.400"> Pólvora<br>
<input type="checkbox" name="option65" value="106.560"> Robótica<br>
<input type="checkbox" name="option66" value="209.040"> <small>Construção de Canhões</small><br>
<input type="checkbox" name="option67" value="532.800"> Futuro Bélico<br>
</div>
<br>
<br>
<br>
<br>
</td>
</tr>
<tr>
<td colspan="4" align="center"><form name="form1" onReset="alert('Considerado meio padrão de envio')">
<input style="background-color: #DAA520 "; type="reset" name="padrão" value="Limpar">
</form> <input style="background-color: #DAA520 "; type="button" name="DoIt"
value="  Calcular  " onClick="Math.round(Calc.Total.value = eval((Calc.option1.value / 50)+(Calc.option2.value / 50)+(Calc.option3.value / 50)+(Calc.option4.value / 50)+(Calc.option5.value / 50)+(Calc.option6.value / 50)+(Calc.option7.value / 50)+(Calc.option8.value / 50)+(Calc.option9.value / 50)+(Calc.option10.value / 50)+(Calc.option11.value / 50)+(Calc.option12.value / 50)+(Calc.option13.value / 50)+(Calc.option14.value / 50)+(Calc.option15.value / 50)+(Calc.option16.value / 50)+(Calc.option17.value / 50)+(Calc.option18.value / 50)+(Calc.option19.value / 50)+(Calc.option20.value / 50)+(Calc.option21.value / 50)+(Calc.option22.value / 50)+(Calc.option23.value / 50)+(Calc.option24.value / 50)+(Calc.option25.value / 50)+(Calc.option26.value / 50)+(Calc.option27.value / 50)+(Calc.option28.value / 50)+(Calc.option29.value / 50)+(Calc.option30.value / 50)+(Calc.option31.value / 50)+(Calc.option32.value / 50)+(Calc.option33.value / 50)+(Calc.option34.value / 50)+(Calc.option35.value / 50)+(Calc.option36.value / 50)+(Calc.option37.value / 50)+(Calc.option38.value / 50)+(Calc.option39.value / 50)+(Calc.option40.value / 50)+(Calc.option41.value / 50)+(Calc.option42.value / 50)+(Calc.option43.value / 50)+(Calc.option44.value / 50)+(Calc.option45.value / 50)+(Calc.option46.value / 50)+(Calc.option47.value / 50)+(Calc.option48.value / 50)+(Calc.option49.value / 50)+(Calc.option50.value / 50)+(Calc.option51.value / 50)+(Calc.option52.value / 50)+(Calc.option53.value / 50)+(Calc.option54.value / 50)+(Calc.option55.value / 50)+(Calc.option56.value / 50)+(Calc.option57.value / 50)+(Calc.option58.value / 50)+(Calc.option59.value / 50)+(Calc.option60.value / 50)+(Calc.option61.value / 50)+(Calc.option62.value / 50)+(Calc.option63.value / 50)+(Calc.option64.value / 50)+(Calc.option65.value / 50)+(Calc.option66.value / 50)+(Calc.option67.value / 50)))">
<input type="text"  name="Total" size="10"></td>
</tr>
</table>
</form>

Gostaria de ressaltar que sou iniciante e por isso o código deve estar bem amador e talvez com erros. Agradeço desde já aos que ajudarem.

Mauricio Lima · January 19, 2012

se entendi você quer algo assim:

<html>

<head>

i = 0;

function soma(v){

i = i + parseInt(v);

document.f.saida.value = i;

}

</script>

</style>

</<head>

<body>

<input type="checkbox" name="option1" value="12" onclick="soma(this.value);"> Conservação<br>

<input type="checkbox" name="option2" value="24" onclick="soma(this.value);"> Roldana<br>

</form>

</body>

</html>

JM Pessanha · January 19, 2012

se entendi você quer algo assim:
<html>
<head>
<script language="javascript">
i = 0;
function soma(v){
i = i + parseInt(v);
document.f.saida.value = i;
}
</script>
</style>
</<head>
<body>
<form name="f" id="f">
<input type="checkbox" name="option1" value="12" onclick="soma(this.value);"> Conservação<br>
<input type="checkbox" name="option2" value="24" onclick="soma(this.value);"> Roldana<br>
<input type="text" name="saida" id="saida"/>
</form>
</body>
</html>

Tentei utilizar mas não funcionou.

O que eu quero é quando eu marcar uma checkbox, no campo de saída seja exibido o seu falor divido por 50 (Ex: Conservação / 50). Caso eu marque mais de uma checkbox, os seus valores serão somados, o resultado será dividido por 50 e será exibido o resultado final no campo de saída.

Esta parte do código eu sei que esta errada, foi apenas uma tentativa:

<input style="background-color: #DAA520 "; type="button" name="DoIt"
value="  Calcular  " onClick="Math.round(Calc.Total.value = eval((Calc.option1.value / 50)+(Calc.option2.value / 50)+(Calc.option3.value / 50)+(Calc.option4.value / 50)+(Calc.option5.value / 50)+(Calc.option6.value / 50)+(Calc.option7.value / 50)+(Calc.option8.value / 50)+(Calc.option9.value / 50)+(Calc.option10.value / 50)+(Calc.option11.value / 50)+(Calc.option12.value / 50)+(Calc.option13.value / 50)+(Calc.option14.value / 50)+(Calc.option15.value / 50)+(Calc.option16.value / 50)+(Calc.option17.value / 50)+(Calc.option18.value / 50)+(Calc.option19.value / 50)+(Calc.option20.value / 50)+(Calc.option21.value / 50)+(Calc.option22.value / 50)+(Calc.option23.value / 50)+(Calc.option24.value / 50)+(Calc.option25.value / 50)+(Calc.option26.value / 50)+(Calc.option27.value / 50)+(Calc.option28.value / 50)+(Calc.option29.value / 50)+(Calc.option30.value / 50)+(Calc.option31.value / 50)+(Calc.option32.value / 50)+(Calc.option33.value / 50)+(Calc.option34.value / 50)+(Calc.option35.value / 50)+(Calc.option36.value / 50)+(Calc.option37.value / 50)+(Calc.option38.value / 50)+(Calc.option39.value / 50)+(Calc.option40.value / 50)+(Calc.option41.value / 50)+(Calc.option42.value / 50)+(Calc.option43.value / 50)+(Calc.option44.value / 50)+(Calc.option45.value / 50)+(Calc.option46.value / 50)+(Calc.option47.value / 50)+(Calc.option48.value / 50)+(Calc.option49.value / 50)+(Calc.option50.value / 50)+(Calc.option51.value / 50)+(Calc.option52.value / 50)+(Calc.option53.value / 50)+(Calc.option54.value / 50)+(Calc.option55.value / 50)+(Calc.option56.value / 50)+(Calc.option57.value / 50)+(Calc.option58.value / 50)+(Calc.option59.value / 50)+(Calc.option60.value / 50)+(Calc.option61.value / 50)+(Calc.option62.value / 50)+(Calc.option63.value / 50)+(Calc.option64.value / 50)+(Calc.option65.value / 50)+(Calc.option66.value / 50)+(Calc.option67.value / 50)))">
<input type="text"  name="Total" size="10"></td>

Obrigado por tentar me ajudar Maurício. ^^ Alguém tem mais alguma alternativa?

Edited January 19, 2012 by JM Pessanha

Mauricio Lima · January 20, 2012

o exemplo que eu te dei é de como pegar o valor e somar, basta você implementar a conta que você precisa. o modo de fazer é o mesmo!

JM Pessanha · January 20, 2012

Sim Maurício, desculpe. Testei novamente aqui e depois de muita insistência consegui mais ou menos. Mas da maneira como você postou o resultado é exibido logo que se marca a checkbox. E a cada vez que vou clicando (marcando e desmarcando) na checkbox o valor vai se multiplicando.

A maneira que queria é que houvesse um botão "calcular" para que a a pessoa marcasse a checkbox e o resultado só aparecesse caso fosse clicado no botão. Poderia me ajudar?

Dede já, obrigado.

Edited January 20, 2012 by JM Pessanha

JM Pessanha · January 22, 2012

BUMP

Alguém poderia me ajudar! Não estou conseguindo concluir o script :(

Sign In

Checkbox

Question

JM Pessanha

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Mauricio Lima

Link to comment

Share on other sites

JM Pessanha

Link to comment

Share on other sites

Mauricio Lima

Link to comment

Share on other sites

JM Pessanha

Link to comment

Share on other sites

JM Pessanha

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity