Sum and subtract points groups assigned to Radios and Checkbox

Question

Sum and subtract points groups assigned to Radios and Checkbox

Navigation

#1 by (1 votes)

0

I have a form:

var total = parseInt($("#txtsuma").val());

function sumar(valor) {
  total += valor; 
  //document.frmcalificar.total.value = total;
  $("#lblsuma").text(total);
  $("#txtsuma").val(total);
  
  //document.frmcalificar.lblsuma.value = total;
}

function restar(valor) {
  total -= valor; 
  $("#lblsuma").text(total);
  $("#txtsuma").val(total);
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
      
<form id="frmcalificar" name="calificar">
<p>
  <fieldset id="fieldset">
    Referencia 1:
    <input type="checkbox" name="ref1" id="ref1" value="10" onClick="if (this.checked) sumar(10); else restar(10)">10<br>
    Referencia 2:</td>
    <input type="checkbox" name="ref2" id="ref2"value="10" onClick="if (this.checked) sumar(10); else restar(10)">10
  </fieldset>
</p>
<p>
  <fieldset id="fieldset">
    <legend>Experiencia</legend>
    <input type="radio" class="optexp" name="optexp" id="optexp1" value="30" >Mayor de 10 A&ntilde;os (30 puntos)<br>
    <input type="radio" class="optexp" name="optexp" id="optexp2" value="15" >Entre 1 y 10 A&ntilde;os (15 puntos)<br>
    <input type="radio" class="optexp" name="optexp" id="optexp3" value="4" >Menor de 1 A&ntilde;os (4 puntos)
    <input type="text" name="txtanteriorexp" id="txtanteriorexp" value="0">
  </fieldset>
</p>

<label id="lblsuma" name = "lblsuma" style="font-size:14px; color:red"></label><b>
</form>

The interaction with the checkbox works perfectly, but I have not managed to make the script so that it can be added or subtracted according to what they are selecting in the radios . Can you give me a hand with this please.

javascript jquery

asked by Carlos Adrian Zapata Garcia 23.03.2018 в 15:05

source

1 answer

table that gives even and odd numbers How to implement the max and min in jpa, to obtain the maximum and minimum date?

score 1 · Answer 1

Here I show you another approach to solve it, instead of adding or subtracting, I calculate the result in each event, both selection / deslection of checkbox and radio buttons.

$(document).ready(function() {

    
    $('#ref1, #ref2, input:radio[name="optexp"]').change(function() {
        sumarTodo();
    });
    
    function sumarTodo(){
      var valor_radio = $('input[name=optexp]:checked').val()?parseInt($('input[name=optexp]:checked').val()):0;
      var valor_referencia1 = $("#ref1").is(":checked")?parseInt($("#ref1").val()):0;
      var valor_referencia2 = $("#ref2").is(":checked")?parseInt($("#ref1").val()):0;
      var resultado = valor_radio + valor_referencia1 + valor_referencia2;
 
      $("#lblsuma").html(resultado);
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="frmcalificar" name="calificar">
    <fieldset id="fieldset">
        Referencia 1:
        <input type="checkbox" name="ref1" id="ref1" value="10">10<br>
        Referencia 2:
        <input type="checkbox" name="ref2" id="ref2"value="10">10
    </fieldset>
    <fieldset id="fieldset"><legend>Experiencia</legend>
        <input type="radio" class="optexp" name="optexp" id="optexp1" value="30" >Mayor de 10 A&ntilde;os (30 puntos)<br>
        <input type="radio" class="optexp" name="optexp" id="optexp2" value="15" >Entre 1 y 10 A&ntilde;os (15 puntos)<br>
        <input type="radio" class="optexp" name="optexp" id="optexp3" value="4" >Menor de 1 A&ntilde;os (4 puntos)
    </fieldset>
    <label id="lblsuma" name = "lblsuma" style="font-size:14px; color:red"></label><b>
</form>