Question

我想根据选中的复选框在文本框中添加总和。但我的文本框值根据用户的选择动态变化，如何解决？

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="">

问题是基于其他下拉列表的第三个值更改

我做了一些事情来生成第三个结果，但无法动态地将该值绑定到复选框值。这是下面的代码

<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">

Answer 1

由于您正在使用Angular，因此无需在此案例中使用jQuery。

查看工作：

＆＃13;

(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;
    }
  }
})();

＆＃13;

<!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>

＆＃13;

Answer 2

您不能依赖点击事件来获取复选框值，因为它会在值真正更新之前附加。使用＆＃34;更改＆＃34;事件而不是。这是一个jQuery版本：

＆＃13;

$('.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));
}

＆＃13;

<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="" >

＆＃13;

不确定您尝试使用#txt2值做什么，但从那里可以很容易地实现您的项目。

根据选中的复选框计算文本框上的值总和

2 个答案: