Add and subtract checkboxes

Asked

Viewed 49 times

0

I have this group of inputs and I need that when marked they add the values and when cleared subtract

   <div class="servicos" style= "justify-content: space-around; padding-left: 50px;">

      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" value="119" id="customCheck_brasil" onclick="tribunais_estaduais(), brasil()">
        <label class="custom-control-label" for="customCheck_brasil">Brasil</label>
      </div>

      <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input"  value="12" id="customCheck_reg_norte" onclick="regiao_norte()">
          <label class="custom-control-label" for="customCheck_reg_norte" >Região Norte</label>
        </div>

      <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" value="30" id="customCheck_reg_nordeste" onclick="regiao_nordeste()">
          <label class="custom-control-label" for="customCheck_reg_nordeste">Região Nordeste</label>
      </div>

      <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" value="11" id="regiao_centro_oeste" onclick="reg_centro_oeste()">
          <label class="custom-control-label" for="regiao_centro_oeste">Região Centro-Oeste</label>
      </div>

      <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" value="15" id="customCheck_sudeste" onclick="regiao_sudeste()">
          <label class="custom-control-label" for="customCheck_sudeste">Região Sudeste</label>
      </div>

      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" value="8" id="customCheck_reg_sul" onclick="regiao_sul()">
        <label class="custom-control-label" for="customCheck_reg_sul">Região Sul</label>
    </div>

    <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input"  value="60" id="customCheck_trib_est" onclick="tribunais_estaduais(),trib_estaduais()">
            <label class="custom-control-label" for="customCheck_trib_est" >Tribunais Estaduais</label>
          </div>

        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" value="8" id="customCheck_trib_fed" onclick="tribunais_federais(), trib_federais()">
            <label class="custom-control-label" for="customCheck_trib_fed">Tribunais Federais</label>
        </div>

        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input"  value="3" onclick="tribunais_superiores(), trib_superiores()" id="customCheck_trib_sup">
            <label class="custom-control-label"  for="customCheck_trib_sup">Tribunais Superiores</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" value="15" id="customCheck_trib_trab" onclick="tribunais_trabalhistas(), trib_trabalhistas()">
            <label class="custom-control-label" for="customCheck_trib_trab">Tribunais Trabalhistas</label>
        </div>

<div class="botao_calc" id="sistemas">
  <button type="button" class="btn btn-info" onblur="">
    Sistemas Monitorados <span class="badge badge-light" id="qtde_sistemas">0<label for="" ></label></span>
  </button>
</div>

tried that script

  var tribunais_estaduais = 60;
  var tribunais_federais = 41;
  var tribunais_superiores = 3;
  var tribunais_trabalhistas = 15;
  
  var sistemas = document.getElementById('qtde_sistemas');

  if(customCheck_trib_est.checked == true) {
    sistemas.innerHTML = tribunais_estaduais;
  }else{
    sistemas.innerHTML = tribunais_estaduais - tribunais_estaduais
  }
  if(customCheck_trib_fed.checked == true) {
    sistemas.innerHTML = tribunais_federais;
  }else{
    sistemas.innerHTML = tribunais_federais - tribunais_federais;
  }
  if(customCheck_trib_sup.checked == true) {
    sistemas.innerHTML = tribunais_superiores;
  }else{
    sistemas.innerHTML = tribunais_superiores - tribunais_superiores;
  }
  if(customCheck_trib_trab.checked == true) {
    sistemas.innerHTML = tribunais_trabalhistas;
  }else{
    sistemas.innerHTML = tribunais_trabalhistas - tribunais_trabalhistas;
  }

javascript jquery

  • Tried to develop some script??

  • face tried, but $(':checkbox'). click(Function() { //Assigns input value p/ variable'value' var value = parseint($(this). val()); //If the checkbox is checked it adds up if it does not subtract if ($(this). is(":checked")) { total += value; } Else { total -= value; } //Assigns the value to the input $('qtde_systems'). val(total); });

  • if any answer has served mark as accepted, see https://i.stack.Imgur.com/evLUR.png

1 answer

1

//evento de alteração nos inputs checkbox
$(":checkbox").on("change", function() {
  //altera o valor #total ao marcar/desmarcar os checkbox
  $("#total").val(function() {
    //declarar uma variável para manter a soma dos valores
    var sum = 0;
    //Iteração para somar os valores das caixas de seleção marcadas
    $(":checkbox:checked").each(function() {
      sum += ~~$(this).val();
    });
    return sum;
  });
});

//coloquei essas functions que não fazem absolutamente nada para não dar erro no executar.
function tribunais_estaduais(){};
function brasil(){};
function regiao_norte(){};
function regiao_nordeste(){};
function reg_centro_oeste(){};
function regiao_sudeste(){};
function regiao_sul(){};
function tribunais_estaduais(){};
function trib_estaduais(){};
function tribunais_federais(){};
function trib_federais(){};
function tribunais_superiores(){};
function trib_superiores(){};
function tribunais_trabalhistas(){};
function trib_trabalhistas(){};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="servicos" style= "justify-content: space-around; padding-left: 50px;">

  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" value="119" id="customCheck_brasil" onclick="tribunais_estaduais(), brasil()">
    <label class="custom-control-label" for="customCheck_brasil">Brasil</label>
  </div>

  <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input"  value="12" id="customCheck_reg_norte" onclick="regiao_norte()">
      <label class="custom-control-label" for="customCheck_reg_norte" >Região Norte</label>
    </div>

  <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" value="30" id="customCheck_reg_nordeste" onclick="regiao_nordeste()">
      <label class="custom-control-label" for="customCheck_reg_nordeste">Região Nordeste</label>
  </div>

  <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" value="11" id="regiao_centro_oeste" onclick="reg_centro_oeste()">
      <label class="custom-control-label" for="regiao_centro_oeste">Região Centro-Oeste</label>
  </div>

  <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" value="15" id="customCheck_sudeste" onclick="regiao_sudeste()">
      <label class="custom-control-label" for="customCheck_sudeste">Região Sudeste</label>
  </div>

  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" value="8" id="customCheck_reg_sul" onclick="regiao_sul()">
    <label class="custom-control-label" for="customCheck_reg_sul">Região Sul</label>
</div>

<div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input"  value="60" id="customCheck_trib_est" onclick="tribunais_estaduais(),trib_estaduais()">
        <label class="custom-control-label" for="customCheck_trib_est" >Tribunais Estaduais</label>
      </div>

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" value="8" id="customCheck_trib_fed" onclick="tribunais_federais(), trib_federais()">
        <label class="custom-control-label" for="customCheck_trib_fed">Tribunais Federais</label>
    </div>

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input"  value="3" onclick="tribunais_superiores(), trib_superiores()" id="customCheck_trib_sup">
        <label class="custom-control-label"  for="customCheck_trib_sup">Tribunais Superiores</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" value="15" id="customCheck_trib_trab" onclick="tribunais_trabalhistas(), trib_trabalhistas()">
        <label class="custom-control-label" for="customCheck_trib_trab">Tribunais Trabalhistas</label>
    </div>
    <input id="total" name='total' readonly='readonly'>

put the funcions not to give error in running but you must have them there.

Browser other questions tagged javascript jquery

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