CODEWITHSUNDEEP
javascriptjqueryangularjs
Rajesh
Rajesh

Reputation: 3

Calculate sum of values on text-boxes based on checkbox checked

I want to add total sum in the text boxes based on the checkbox checked. But my text-box values varies dynamically based on the user choice, how to solve this?

function UpdateCost() {
  var sum = 0;
  var gn, elem;
  for (i=0; i<5; i++) {
    gn = 'game'+i;
 elem = document.getElementById(gn);
  if (elem.checked == true) { sum += Number(elem.value); }
 }
 document.getElementById('totalcost').value = sum.toFixed(2);
} 

<html>

<input type="checkbox" id='game0' value="9.99"  onclick="UpdateCost()">Game 1 ( 9.99)<br>
<input type="checkbox" id='game1' value="19.99" onclick="UpdateCost()">Game 2 (19.99)<br>
<input type="checkbox" id='game2' value="27.50" onclick="UpdateCost()">Game 3 (27.50)<br>
<input type="text" id="totalcost" value="">

The problem is the third value changes based on the other dropdown list

i have done something to generate the result of third but could not bind that value to checkbox value dynamically. here is the code below

<select ng-model="num1" ng-init="1">
 <option selected ="selected" value="1">1
<option value="2">2
 <option value="3">3
</select>

<input type="number" id="txt2" value="{{num1*1000}}" readonly="true">

Upvotes: 0

Views: 1864

Answers (2)

developer033
developer033

Reputation: 24874

Since you're using Angular, there's no necessity of the use of jQuery in this case.

See it working:

(function() {
  angular
    .module("app", [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.UpdateCost = UpdateCost;
    $scope.updateInputNumber = updateInputNumber;

    // Initialization
    UpdateCost(); // -> you can remove this if you don't want to show 0.00 on init
    $scope.options = [1, 2, 3];
    $scope.num1 = 1;
    updateInputNumber();

    $scope.checkboxes = [  
       {
          "name":"Game1",
          "value":9.99
       },
       {
          "name":"Game2",
          "value":19.99
       },
       {
          "name":"Game3",
          "value":27.5
       }
    ];       

    function UpdateCost() {
      $scope.total = $scope.checkboxes.filter(function(value) {
        return value.selected;
      }).reduce(function(a, b) {
        return a + b.value;
      }, 0).toFixed(2);
    }
    
    function updateInputNumber() {
      $scope.inputNumber = $scope.num1 * 1000;
    }
  }
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="box in checkboxes track by $index">
    <label>
      <input type="checkbox" ng-click="UpdateCost()" ng-model="box.selected">{{box.name}} ({{box.value}})
    </label>
  </div>
  <hr>
  <label for="totalcost">Total: </label>
  <input type="text" id="totalcost" ng-model="total">
  <hr>
  <select ng-options="option for option in options" ng-model="num1" ng-change="updateInputNumber()">
  </select>
  <input type="number" id="txt2" ng-model="inputNumber" disabled>
</body>

</html>

Upvotes: 1

technico
technico

Reputation: 1172

You can't rely on the click event to get checkbox values, as it's append before the value is really updated. Use the "change" event instead. Here is a jQuery version : 

$('.cb').on('change', function(){ // on change of state
   UpdateCost();
});
$('#myselect').on('change', function(){ // on change of state
   $("#txt2").val( $('#myselect').val()*1000);
});
function UpdateCost() {
  var sum = 0;
  var gn, elem;
  $('.cb:checked').each(function(){
     sum += Number($(this).val()); 
  })
 
 $('#totalcost').val(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<input type="checkbox" class="cb" id='game0' value="9.99"  >Game 1 ( 9.99)<br>
<input type="checkbox" class="cb" id='game1' value="19.99" >Game 2 (19.99)<br>
<input type="checkbox" class="cb" id='game2' value="27.50" >Game 3 (27.50)<br>
<input type="text" id="totalcost" value="">



<select id="myselect" ng-model="num1" ng-init="1">
 <option selected ="selected" value="1">1
<option value="2">2
 <option value="3">3
</select>

<input type="number" id="txt2" value="" >

Not sure about what you are trying to do with #txt2 value, but from there it will be easy to achieve your project.

Upvotes: 0

Related Questions