Question

以下表格在阵列中有3个单选按钮和5个复选框。 Radio1显示CB1，Radio2显示CB2，CB3和CB4，最后Radio3显示CB5。当我从另一个组中选中一个复选框时，我想取消选中该复选框。也就是说，如果首先选择CB1，并且如果我单击其他两个组中的任何其他复选框，则应取消选中CB1。我确实喜欢下面，但它没有正常工作。

HTML

    <form>
        <label class="radio-inline" >
        <input value="1" type="radio" ng-model="radioM" >Main1</label>
        <label class="radio-inline">
        <input value="2" type="radio" ng-model="radioM" >Main2</label>
        <label class="radio-inline">
        <input value="3" type="radio" ng-model="radioM" >Main3</label>
        <div class="">
        <label ng-repeat="branch in branches" >
        <input  type="checkbox" name="selectedBranches[]" value="{{branch.value}}" 
                ng-model="branch.selected" ng-click="unChecker()"  >{{branch.name}}
        </label></div> 
        </form>

控制器

$scope.branches= [ { name: 'B1', selected: false, value: '1'},
                   { name: 'B2', selected: false, value: '2'},
                   { name: 'B3', selected: false, value: '3'},
                   { name: 'B4', selected: false, value: '4'}
                   { name: 'B5', selected: false, value: '5'}
                  ];
$scope.unChecker = function () {
         if( $scope.branches[0].selected==true) {
         $scope.branches[1].selected=false;
         $scope.branches[2].selected=false;
         $scope.branches[3].selected=false;
         $scope.branches[4].selected=false;
          }
         if $scope.branches[1].selected==true || $scope.branches[2].selected ==true
                        || $scope.branches[3].selected==true){
         $scope.branches[0].selected=false;
         $scope.branches[4].selected=false;
       }
         if( $scope.branches[4].selected==true) {
          $scope.branches[0].selected=false;
          $scope.branches[1].selected=false;
          $scope.branches[2].selected=false;
          $scope.branches[3].selected=false;
         }
};

Answer 1

我已按预期修改了代码。

注意：我没有使用单选按钮做任何事情，因为你没有提出任何问题。

＆＃13;

var app = angular.module('app', []);

app.controller('CheckBoxController', function($scope) {
  $scope.branches = [ 
   { name: 'B1', selected: false, value: '1', group: 'A'},
                   { name: 'B2', selected: false, value: '2', group: 'B'},
                   { name: 'B3', selected: false, value: '3', group: 'B'},
                   { name: 'B4', selected: false, value: '4', group: 'B'},
                   { name: 'B5', selected: false, value: '5', group: 'C'}
                  ];
  
$scope.unChecker = function (index) {
   var group = $scope.branches[index].group;
   angular.forEach($scope.branches, function(obj, i){
     if(obj.group !== group) {
       obj.selected = false;
     }
   });
}; 

});

angular.bootstrap(document, ['app']);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-controller="CheckBoxController">
        <label class="radio-inline" >
        <input value="1" type="radio" ng-model="radioM" >Main1</label>
        <label class="radio-inline">
        <input value="2" type="radio" ng-model="radioM" >Main2</label>
        <label class="radio-inline">
        <input value="3" type="radio" ng-model="radioM" >Main3</label>
        <div class="">
        <label ng-repeat="branch in branches" >
        <input  type="checkbox" name="selectedBranches{{$index}}" value="{{branch.value}}" 
                ng-model="branch.selected" ng-change="unChecker($index)"  >{{branch.name}}
        </label></div> 
        </form>

＆＃13;

Javascript分组CheckBoxes - 应在组之间充当RadioButton

1 个答案: