计数复选框：选中答案

【问题标题】：Count Checkboxes:checked计数复选框：选中
【发布时间】：2019-11-20 17:39:59
【问题描述】：

我正在尝试找出最简单的方法来添加所有选中的复选框。我在过去几周进行了研究，对于这样一个简单的任务，答案似乎没有帮助或看起来很复杂。

我正在尝试将选中复选框的数量相加，以便将其与“标准”进行比较。例如，我需要满足 3/3 标准（因此，一旦选择了 3 个复选框，我就满足了我的标准）。每次选中一个复选框时，我希望它立即显示添加了另一个标准点。

有人可以帮助指导我吗？我觉得 angular 最适合双重绑定和实时更新，但是我知道 jquery 有一个 key up 功能可能会做类似的事情。以下是我最好的镜头，但没有奏效：

<input type=“checkbox” id=“Criteria1”>
<input type=“checkbox” id=“Criteria2”>
<input type=“checkbox” id=“Criteria3”>


<div id="message"></div>

<p><span id="result"></span> / <span id="total"></span></p>
     <!--User sees that its 1/3, or 2/3, or 3/3 as they check off-->

While (checkbox.checked){ <!--Not sure if i should use "for" instead-->
 Var i = i+1 <!--Adds one to result-->
 } else
 Var i = i-1; <!--returns to value before checked-->
}

<script>
Var criteria=“3”;
Var result=“0”;
If (result<criteria){
 document.getElementByID("message") = "Criteria Not yet Met";
} else {
document.getElementByID("message") ="Criteria Met!";
}

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

您可以使用复选框中的change 事件来等待复选框被选中（或取消选中）。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

我写了个速写笔举个例子：
https://codepen.io/Daniel_I_Am/pen/YzzgWma

我在codepen中放了一些cmet，如果有不清楚的地方，请随时在这篇文章中添加评论！

【讨论】：

哇！太感谢了！！这非常有帮助

【解决方案2】：

您可以使用 jQuery 轻松做到这一点：

var criteria="3";
        $(document).ready(function(){
            $("input:[type=checkbox]").change(function(){
                if($("input:[type=checkbox]:checked").length==criteria)
                    alert("Criteria Met!");
                else
                    alert("Criteria Not yet Met");
            })
        })

之前别忘了调用jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

【讨论】：

【解决方案3】：

如果你想使用 AngularJs：

App.js：

var app = angular.module('test', []);

app.controller('MainCtrl', function($scope) {


  $scope.init = function() {
    $scope.criteria = $scope.createData();
    $scope.totalSelected = 0;
    $scope.criteriaMet = '';
  }

  $scope.createData = function() {
    return [
      {
        'id': 1,
        'name': 'Criteria One',
        'selected': false
      },
      {
        'id': 2,
        'name': 'Criteria Two',
        'selected': false
      },
      {
        'id': 3,
        'name': 'Criteria Three',
        'selected': false
      },
    ];
  }


  $scope.updateTotal = function(item) {
      if (item) {
        $scope.totalSelected++;
      }
      else {
        $scope.totalSelected--;
      }

      if($scope.criteria.length == $scope.totalSelected){
        $scope.criteriaMet = 'Criteria Met!'
      }
      else {
        $scope.criteriaMet = 'Criteria Not yet Met'
      }
  }

  $scope.init();

});

Index.html

<!DOCTYPE html>
<html ng-app="test">

  <head>
    <meta charset="utf-8" />
    <title>Criteria</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="app.js"></script>
  </head>

  <body >
    <form ng-controller="MainCtrl">
      <table>
        <tr ng-repeat="item in criteria">
          <td>
          <input type="checkbox" 
                 value="{{item.id}}"
                 ng-model="item.selected"
                 ng-change="updateTotal(item.selected)"> &nbsp; {{item.name}}
           </td>
        </tr>
      </table>
       <p>
          {{ criteriaMet}}
       </p>
    </form>

  </body>

</html>

【讨论】：