Javascript分組複選框 - 應作爲組之間的RadioButton

-1

以下表格在數組中有3個單選按鈕和5個複選框。 Radio1顯示CB1，Radio2顯示CB2，CB3和CB4，最後Radio3顯示CB5。當我從另一個組中選擇一個複選框時，我想取消選中該複選框。那就是如果CB1被首先選中，並且如果我點擊其他兩組中的任何其他複選框，CB1應該被取消選中。我喜歡下面，但它不能正常工作。Javascript分組複選框 - 應作爲組之間的RadioButton

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

來源

2016-11-11 user3844782

我不明白。那麼無線電的用途是什麼？他們在這裏似乎沒有做任何事情。它們甚至不像單選按鈕那樣相互排斥。 –

我從無線電和複選框獲得價值查詢 – user3844782

因此，你的問題中的句子「Radio1顯示CB1，Radio2顯示CB2，CB3和CB4，最後Radio3顯示CB5」，對嗎？他們不顯示或隱藏任何東西。你爲什麼使用單選按鈕，而不是讓它們相互排斥呢？爲什麼他們都共享相同的ngModel。我在問，因爲解釋和代碼都沒有多少意義，而且它們不匹配。 –

如您所願我已經修改了代碼。

注：我沒有做任何與單選按鈕，因爲你什麼都沒問。

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']);

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

來源

2016-11-11 08:38:10 Aruna

如果我選擇B2然後B3，它不應該取消選中。這是在一個組中，我應該能夠選擇多個複選框。這裏B1，B2/B3/B4和B5是3組。 – user3844782

如何檢查它們是否屬於同一組？任何財產從json檢查？ – Aruna

其實我顯示和隱藏複選框。如果我點擊radio1，它會顯示cb1等 – user3844782

Javascript分組複選框 - 應作爲組之間的RadioButton

回答

相關問題