Checkbox

JM Pessanha · Janeiro 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 · Janeiro 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 · Janeiro 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?

Editado Janeiro 19, 2012 por JM Pessanha

Mauricio Lima · Janeiro 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 · Janeiro 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.

Editado Janeiro 20, 2012 por JM Pessanha

JM Pessanha · Janeiro 22, 2012

BUMP

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

Entrar

Checkbox

Pergunta

JM Pessanha

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Mauricio Lima

Link para o comentário

Compartilhar em outros sites

JM Pessanha

Link para o comentário

Compartilhar em outros sites

Mauricio Lima

Link para o comentário

Compartilhar em outros sites

JM Pessanha

Link para o comentário

Compartilhar em outros sites

JM Pessanha

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades