javascript - 表单上的更改事件 - 仅在第一组单选按钮上触发，而不在其余单选按钮上触发

Question

为了将监听器数量降至最低，我在表单上使用一个 change 监听器。但是，只有当我更改第一列/第一组单选按钮时，该事件才会触发。它不会触发单选按钮的其余列。

这是为什么？如何为所有单选按钮仅使用一个更改监听器？

<div class="filter-column" data-ng-init="init()">
  <form name="ppvSelectionForm">
    <div class="filter-title">Region</div>
    <div class="bottom-line"></div>
    <div class="overflow-container">
      <input type="radio" value="all" name="regionRadio" checked>All
      <div ng-repeat="choice in regions| orderBy: 'description'">
        <input type="radio" value="{{choice.name}}" name="regionRadio">
        {{choice.description}}
      </div>
    </div>
  </div>

  <div class="filter-column">
    <div class="filter-title">Market</div>
    <div class="bottom-line"></div>
    <div class="overflow-container">
      <div ng-if="markets.length >= 1">
        <input type="radio" value="all" name="marketRadio" checked>All
      </div>
      <div ng-repeat="choice in markets| orderBy: 'name'">
        <input type="radio" value="{{choice.name}}" name="marketRadio">
        {{choice.name}}
      </div>
    </div>
  </div>

  <div class="filter-column">
    <div class="filter-title">Dealer</div>
    <div class="bottom-line"></div>
    <div class="overflow-container">
      <div ng-if="dealers.length >= 1">
        <input type="radio" value="all" name="dealerRadio" checked>All
      </div>
      <div ng-repeat="choice in dealers| orderBy: 'name'">
        <input type="radio" value="{{choice.name}}" name="dealerRadio">
        {{choice.name}}
      </div>
    </div>
  </div>

<小时/>

 $scope.init = function() {
    formEl = document.querySelector('form[name="ppvSelectionForm"]');
    formEl.addEventListener("change", radioMap);
  } 

  function radioMap(el) {
    console.log(el.target.name)
    switch(el.target.name) {
      case 'regionRadio':
        regionsOrMarkets(el.target.value);
      break;
      case 'marketRadio':
        populateDealers(el.target.value);
      break;
    }
  }

Answer 1

我认为这似乎是所提供的代码片段的罪魁祸首。额外的关闭 div 正在关闭 Controller 的范围。

    <div ng-controller="MyCtrl" class="filter-column" data-ng-init="init()">
      <form name="ppvSelectionForm">
        <div class="filter-title">Region</div>
        <div class="bottom-line"></div>
        <div class="overflow-container">
          <input type="radio" value="all" name="regionRadio" checked>All
          <div ng-repeat="choice in regions">
            <input type="radio" value="{{choice}}" name="regionRadio">
            {{choice}}
          </div>
        </div>
     </div><------ Extra closing div

请告诉我这是否有帮助。试了一下jsfiddle