CODEWITHSUNDEEP
javascriptjqueryhtml
Jigna Jain
Jigna Jain

Reputation: 255

Using checkbox to decide which input boxes value to sum

I am trying to write some Javascript/jQuery to sum the value entered in multiple text boxes.

Each input box has a checkbox associated with it, and based on that checkbox the value will be added to the total. For example, if the user selects Activity fees and Transport fees they should add up, if he selects Misc fees that will also add up, and if he then unchecks Misc fees, that value should be subtracted again.

function optionalfee() {
    var total = 0;
    var fee = document.getElementsById('optional1');
    for (var i = 0; i < fee.length; ++i) {
      if (optional1.checked == true)
        document.getElementById('optional').value = fee;
      total += parseFloat(fee.value);
    }
  } else {
    total -= parseFloat(fee.value);
  }
  //alert(total);
document.getElementById('toptional').value = total;
}
Include Activity fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="afees"><br><br>
Include Transport fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="tfees"><br><br>
Include Misc fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="mfees"><br><br>
Include Olympiad fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="ofees"><br><br>
Optional fees total <input type="number" id="toptional" name="toptional" class="toptional" readonly>

Upvotes: 3

Views: 1500

Answers (6)

mplungjan
mplungjan

Reputation: 177965

  1. made all IDs unique
  2. used classes instead
  3. added missing brackets
  4. tested values for isNaN and empty
  5. also update when number changes

Note I am using data attributes for the id

Plain JS:

function optionalfee() {
  var total = 0;
  // get the checked boxes only
  document.querySelectorAll('.optional:checked').forEach(check => {
    // find the ID of the input to use
    var input = document.getElementById(check.getAttribute("data-id"));
    var val = input.value;
    // handle poor or no input - is in principle already handled by the type="number"
    val = (isNaN(val) || "" === val.trim()) ? 0 : parseFloat(val);
    total += val;
  })
  document.getElementById('toptional').value = total;
}
window.addEventListener("DOMContentLoaded", () => {
  const checks = document.querySelectorAll(".optional"),
    fees = document.querySelectorAll(".fee");
  checks.forEach((check, i) => {
    checks[i].onclick = optionalfee;
    fees[i].oninput = optionalfee;
  })
})
Include Activity fees

<input type="checkbox" class="optional" data-id="optional1" />
<input type="number" class="fee" id="optional1" name="afees">
<br>
<br>Include Transport fees
<input type="checkbox" class="optional" data-id="optional2" />
<input type="number" class="fee" id="optional2" name="tfees">
<br>
<br>Include Misc fees
<input type="checkbox" class="optional" data-id="optional3" />
<input type="number" class="fee" id="optional3" name="mfees">
<br>
<br>Include Olympiad fees
<input type="checkbox" class="optional" data-id="optional4" />
<input type="number" class="fee" id="optional4" name="ofees">
<br>
<br>Optional fees total
<input type="number" id="toptional" name="toptional" class="toptional" readonly>

jQuery:

function optionalfee() {
  var total = 0;
  $('.optional:checked').each(function() {
    var val = $("#"+$(this).data("id")).val();
    val = isNaN(val) || "" === $.trim(val) ? 0 : parseFloat(val);
    total += val;
  });
  $('#toptional').val(total);

}

$(function() {
  $(".optional").each(function() {
    $(this).on("click", optionalfee);
    // if not next to each other, 
    // use  $("#"+$(this).data("id")).on("input", optionalfee);
    $(this).next().on("input", optionalfee);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Include Activity fees
<input type="checkbox" class="optional" data-id="optional1" />
<input type="number" class="fee" id="optional1" name="afees">
<br>
<br>Include Transport fees
<input type="checkbox" class="optional" data-id="optional2" />
<input type="number" class="fee" id="optional2" name="tfees">
<br>
<br>Include Misc fees
<input type="checkbox" class="optional" data-id="optional3" />
<input type="number" class="fee" id="optional3" name="mfees">
<br>
<br>Include Olympiad fees
<input type="checkbox" class="optional" data-id="optional4" />
<input type="number" class="fee" id="optional4" name="ofees">
<br>
<br>Optional fees total
<input type="number" id="toptional" name="toptional" class="toptional" readonly>

Upvotes: 2

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

JavaScript to sum the value entered in multiple number inputs every time an element checkbox or input receive click or input respectively:

var total = document.getElementById('toptional'),
    checkboxs = document.getElementsByClassName('checkbox'),
    inputs = document.getElementsByClassName('fee'),
    getTotalFee = function() {
        var totalFee = 0;
        for (var i = 0, len = checkboxs.length; i < len; i++) {
            checkboxs[i].checked && (totalFee += +inputs[i].value);
        }
        total.value = totalFee;
    };

for (var i = 0, len = checkboxs.length; i < len; i++) {
    checkboxs[i].addEventListener('click', getTotalFee, false);
    inputs[i].addEventListener('input', getTotalFee, false);
}
Include Activity fees: 
<input type="checkbox" class="checkbox">
<input type="number" name="afees" class="fee"><br>

Include Transport fees: 
<input type="checkbox" class="checkbox">
<input type="number" name="tfees" class="fee"><br>

Include Misc fees: 
<input type="checkbox" class="checkbox">
<input type="number" name="mfees" class="fee"><br>

Include Olympiad fees: 
<input type="checkbox" class="checkbox">
<input type="number" name="ofees" class="fee"><br>

<br><br><hr>

<strong>Optional fees total:</strong>
<input type="number" id="toptional" name="toptional" value="0" class="toptional" readonly>

Upvotes: 1

Veer
Veer

Reputation: 6936

Check the code

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script type="text/javascript">

function optionalfee(){
    var total = 0;
    for (var i = 1; i<=4; ++i){ 
        var fee = document.getElementById('optional'+i);
        if(fee.checked==true){
            total += parseFloat(document.getElementById('optional-fee'+i).value);
        }
     }
    //alert(total);
    document.getElementById('toptional').value = total;
}
</script>
</head>
<body>
Include Activity fees <input type="checkbox" id="optional1" onclick="optionalfee()" /> <input type="number" id="optional-fee1" name="afees"><br><br>
Include Transport fees <input type="checkbox" id="optional2" onclick="optionalfee()" /> <input type="number" id="optional-fee2" name="tfees"><br><br>
Include Misc fees <input type="checkbox" id="optional3" onclick="optionalfee()" /> <input type="number" id="optional-fee3" name="mfees"><br><br>
Include Olympiad fees <input type="checkbox" id="optional4" onclick="optionalfee()" /> <input type="number" id="optional-fee4" name="ofees"><br><br>
Optional fees total<input type="number" id="toptional" name="toptional" class="toptional" readonly>
<input type="button" onclick="optionalfee()" value="sum" />
</body>
</html>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The id should be unique in same document but you could achieve what you want without using those ids, check the example below using :checked to get the checked checkboxes then each() to go through them and calculate the total.

Hope this helps.

function calculate_sum() {
  var total = 0;
  $('input[type="checkbox"]:checked').each(function(){
    total += parseInt( $(this).next('input').val() );
  })

  $('#toptional').val(total);
}

$('input[type="checkbox"]').on('change', function(){
  calculate_sum();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Include Activity fees <input type="checkbox" id="optional11" /><input type="number" id="optional1" name="afees"><br><br>
Include Transport fees <input type="checkbox" id="optional22" /><input type="number" id="optional2" name="tfees"><br><br>
Include Misc fees <input type="checkbox" id="optional33" /><input type="number" id="optional3" name="mfees"><br><br>
Include Olympiad fees <input type="checkbox" id="optional44" /><input type="number" id="optional4" name="ofees"><br><br><hr>
Optional fees total <input type="number" id="toptional" name="toptional" class="toptional" readonly>

Upvotes: 1

Rayner Villalba
Rayner Villalba

Reputation: 71

First I notice that you are setting id="optional1" to many elements, remember id is identifier and it should be unique in the html document.

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

<input type="checkbox" id="afees" class="sum-checkbox" />
<input type="number" id="optional" name="afees">

assign input#number name as id of corrsponding checkbox. add one common class (e.g. sum-checkbox) for required checkbox.

var sumAll = 0;
$(".sum-checkbox").on('change',function(){

    var currentCheck = $(this);
   var checkId = $(currentCheck).attr('id');
    if(currentCheck.prop('checked')){

        sumAll += parseInt(inputVal);

    }else{
        sumAll -= parseInt(inputVal);
    }


})

Upvotes: 1

Related Questions