How to call a pure java script function when unchecked and marked a checkbox?

Asked

Viewed 152 times

-1

How to do this in pure java script? because there is a need to change the values of an input when checkbox is checked and unchecked. I want basically that when checking the checkbox the values add up and when subtracted unchecked.

<div id="opc1" class="form-group" style="">
<label class="d-inline">
    <input id="1" name="opc1" type="checkbox" value="100">
    <span>100 personalizados</span>
</label><br>
<label class="d-inline">
    <input id="2" name="opc2" type="checkbox" value="10">
    <span>20 Centros de mesa com 2 Balões a gás em ca</span>
</label><br>
<label class="d-inline">
    <input id="3" name="opc3" type="checkbox" value="20">
    <span>Enchimento e orçamentação de 3000 balões</span>
</label><br>
<label class="d-inline">
    <input id="4" name="opc4" type="checkbox" value="30">
    <span>Bolo cenográfico de 3 andares</span>
</label><br>
<label class="d-inline">
    <input id="5" name="opc5" type="checkbox" value="40">
    <span>Cobertura Fotográfica</span>
</label><br>

javascript function checkbox javascript-events events

  • edited again

  • 3

    What would that be value="1-100.00" in the first checkbox? I have the answer ready, just do not publish because of this value.

  • 1

    would be 100, already edited, sorry for the mistake!

1 answer

2


First let’s add a tag to show the result:

<strong id="total">0</strong>

Now let’s go to javascript:

var checkboxes = document.querySelector('#opc1')
      .querySelectorAll('input[type=checkbox]');
var total = document.querySelector('#total');
Object.keys(checkboxes).map((key) => {
    checkboxes[key].addEventListener('change', function() {
        total.innerHTML = +total.innerHTML + (this.checked ? +this.value : -this.value);
    });
});
  1. var checkboxes = document.document.querySelector('#opc1').querySelectorAll('input[type=checkbox]'); -> Take all the checkbox it contains in the div with ID "opc1";
  2. var total = document.querySelector('#total') -> picks up the tag with ID "total";
  3. Object.keys(checkboxes).map((key) => -> How was a JSON returned in checkboxes, this line transforms the JSON keys into a list;
  4. checkboxes[key].addEventListener('change', function() { -> here he is listening (Listener) if each checkbox (checkboxes[key]) will have a change (change);
  5. total.innerHTML = +total.innerHTML + (this.checked ? +this.value : -this.value) -> If the checkbox is selected, it will add the previous value to the new one, otherwise it will decrease.

I hope I’ve helped, good studies! 

var checkboxes = document.getElementById('opc1')
	.querySelectorAll('input[type=checkbox]');
var total = document.querySelector('#total');
Object.keys(checkboxes).map((key) => {
	checkboxes[key].addEventListener('change', function() {
		total.innerHTML = +total.innerHTML + (this.checked ? +this.value : -this.value);
	});
});
<div id="opc1" class="form-group" style="">
<label class="d-inline">
    <input id="1" name="opc1" type="checkbox" value="100">
    <span>100 personalizados</span>
</label><br>
<label class="d-inline">
    <input id="2" name="opc2" type="checkbox" value="10">
    <span>20 Centros de mesa com 2 Balões a gás em ca</span>
</label><br>
<label class="d-inline">
    <input id="3" name="opc3" type="checkbox" value="20">
    <span>Enchimento e orçamentação de 3000 balões</span>
</label><br>
<label class="d-inline">
    <input id="4" name="opc4" type="checkbox" value="30">
    <span>Bolo cenográfico de 3 andares</span>
</label><br>
<label class="d-inline">
    <input id="5" name="opc5" type="checkbox" value="40">
    <span>Cobertura Fotográfica</span>
</label><br>
<strong id="total">0</strong>

Browser other questions tagged javascript function checkbox javascript-events events

You are not signed in. Login or sign up in order to post.