Jump to content
nmoa

[Resolvido] somar checkbox

Recommended Posts

nmoa

boas

estou com dificuldade obter um resultado no meu código

e a ideia é ter 3 chekcbox todas elas com um valo assocido, neste caso seria uma percentagem,

depois teria um campo onde colocaria o valor e por fim teria outro campo ou div onde iria o total.

a ideia seria ao carregar na checkbox 50% , fosse buscar o valor colocado no input valor e multiplicasse por 0,50 para se obter a comissao

podem ver a ideia aqui para ser mais facil

obrigado desde já pela atenção

https://jsfiddle.net/duitdesign/4v95am9o/2/

Share this post


Link to post
Share on other sites
HappyHippyHippo


<html>
 <head>
   <script>
     function calc() {
       var value = document.getElementById('valor');
       var check1 = document.getElementById('check1');
       var check2 = document.getElementById('check2');
       var check3 = document.getElementById('check3');
       var total = document.getElementById('total');

       var perc = 1;
       if (check1.checked) { perc = perc - parseFloat(check1.value); }
       if (check2.checked) { perc = perc - parseFloat(check2.value); }
       if (check3.checked) { perc = perc - parseFloat(check3.value); }

       total.innerHTML = parseFloat(value.value) * (1 - perc);
     }
   </script>
 </head>

 <body>
   <p>
     <input type="number" id="valor" value="0" onchange="calc();"/><br>
   </p>

   <p>
     <input type="checkbox" name="check1"  id="check1" value="0.50" onclick="calc();" />
     <label for="check1">Comissão 50%</label>
   </p>

   <p>
     <input type="checkbox" name="check2"  id="check2" value="0.25" onclick="calc();" />
     <label for="check2">Partilha 25%</label>
   </p>

   <p>
     <input type="checkbox" name="check3"  id="check3" value="0.10" onclick="calc();" />
     <label for="check3">Partilha loja 10%</label>
   </p>

   <p>
     <div id="total" style="border: 1px solid black; padding: 2px 5px;">0</div>
   </p>
 </body>
</html>


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
nmoa



<html>
 <head>
<script>
  function calc() {
	var value = document.getElementById('valor');
	var check1 = document.getElementById('check1');
	var check2 = document.getElementById('check2');
	var check3 = document.getElementById('check3');
	var total = document.getElementById('total');

	var perc = 1;
	if (check1.checked) { perc = perc - parseFloat(check1.value); }
	if (check2.checked) { perc = perc - parseFloat(check2.value); }
	if (check3.checked) { perc = perc - parseFloat(check3.value); }

	total.innerHTML = parseFloat(value.value) * (1 - perc);
  }
</script>
 </head>

 <body>
<p>
  <input type="number" id="valor" value="0" onchange="calc();"/><br>
</p>

<p>
  <input type="checkbox" name="check1"  id="check1" value="0.50" onclick="calc();" />
  <label for="check1">Comissão 50%</label>
</p>

<p>
  <input type="checkbox" name="check2"  id="check2" value="0.25" onclick="calc();" />
  <label for="check2">Partilha 25%</label>
</p>

<p>
  <input type="checkbox" name="check3"  id="check3" value="0.10" onclick="calc();" />
  <label for="check3">Partilha loja 10%</label>
</p>

<p>
  <div id="total" style="border: 1px solid black; padding: 2px 5px;">0</div>
</p>
 </body>
</html>

Boas

obrigado pela resposta , eu testei e não me faz nada

https://jsfiddle.net/upfyb55d/

o que está a faltar?

Share this post


Link to post
Share on other sites
HappyHippyHippo

o código apresentado foi testado e funciona correctamente, não me interessa o que tenhas no jsfiddle


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
nmoa

o código apresentado foi testado e funciona correctamente, não me interessa o que tenhas no jsfiddle

Edited by nmoa

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.