複選框的行爲與Radiobutton類似

Question

我有4個複選框，它們應該像複選框一樣工作，但它們不會。 我只能選擇一個。有人可以幫我解決我的問題嗎？

我的第二個問題是，它們是否可能從頭被選中？

謝謝！

我想我描述了我的問題錯了，我可以點擊例如兩個複選框，但沒有顯示任何內容。

例如：如果我點擊綠色和紅色，則應顯示兩種顏色。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="form-group"> 
 
    <input type="checkbox" id="stat1" ng-true-value="'black'" ng-model="statusblack"/>&nbsp; 
 
    <label for="stat1">black</label><br /> 
 
    <input type="checkbox" id="stat2" ng-true-value="'red'" ng-model="statusred"/>&nbsp; 
 
    <label for="stat2">red</label><br />        
 
    <input type="checkbox" id="stat3" ng-true-value="'yellow'" ng-model="statusyellow"/>&nbsp; 
 
    <label for="stat3">yellowt</label><br /> 
 
    <input type="checkbox" id="stat4" ng-true-value="'green'" ng-model="statusgreen"/>&nbsp; 
 
    <label for="stat4">green</label><br />      
 
</div> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th>Number</th> 
 
      <th>Color</th> 
 
      <th>Info</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="co in $ctrl.colors | filter:statusred | filter:statusblack | filter:statusgreen | filter:statusyellow"> 
 
      <td>{{ co.no }}</td> 
 
      <td>{{ co.color }}</td> 
 
      <td>{{ co.info }}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

Answer 1

所有複選框可以被選擇。

第二個問題：

如果你想從頁面開始選擇，只是把檢查= 「真」

例如：

<input type="checkbox" id="stat1" ng-true-value="'black'" checked="true" /> 

Answer 2

如前所述，代碼確實有效。

關於默認情況下已將其選中，您需要在輸入標記的末尾添加checked。

E.g. <input type="checkbox" id="stat1" ng-true-value="'black'" ng-model="statusblack" checked/>

有關更多信息，請參閱W3Schools。

Answer 3

添加輸入標籤

<div class="form-group"> 
 
    <input type="checkbox" id="stat1" ng-true-value="'black'" ng-model="statusblack"/>&nbsp; 
 
    <label for="stat1">black</label><br /> 
 
    <input type="checkbox" id="stat2" ng-true-value="'red'" ng-model="statusred"/>&nbsp; 
 
    <label for="stat2">red</label><br />        
 
    <input type="checkbox" id="stat3" ng-true-value="'yellow'" ng-model="statusyellow"/>&nbsp; 
 
    <label for="stat3">yellowt</label><br /> 
 
    <input type="checkbox" id="stat4" ng-true-value="'green'" ng-model="statusgreen" checked/>&nbsp; 
 
    <label for="stat4">green</label><br />      
 
</div> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th>Number</th> 
 
      <th>Color</th> 
 
      <th>Info</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="co in $ctrl.colors | filter:statusred | filter:statusblack | filter:statusgreen | filter:statusyellow"> 
 
      <td>{{ co.no }}</td> 
 
      <td>{{ co.color }}</td> 
 
      <td>{{ co.info }}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

Answer 4

檢查根據你提供的，他們表現得像複選框的代碼示例。 和關於您可以使用ng-checked="true"檢查複選框 最初

演示的第二個問題

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 

 
}) 
 

 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div class="form-group"> 
 
    <input type="checkbox" id="stat1" ng-true-value="'black'" ng-model="statusblack" ng-checked="true"/>&nbsp; 
 
    <label for="stat1">black</label><br /> 
 
    <input type="checkbox" id="stat2" ng-true-value="'red'" ng-model="statusred" ng-checked="true"/>&nbsp; 
 
    <label for="stat2">red</label><br />        
 
    <input type="checkbox" id="stat3" ng-true-value="'yellow'" ng-model="statusyellow" ng-checked="true"/>&nbsp; 
 
    <label for="stat3">yellowt</label><br /> 
 
    <input type="checkbox" id="stat4" ng-true-value="'green'" ng-model="statusgreen" ng-checked="true"/>&nbsp; 
 
    <label for="stat4">green</label><br />      
 
</div> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th>Number</th> 
 
      <th>Color</th> 
 
      <th>Info</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="co in $ctrl.colors | filter:statusred | filter:statusblack | filter:statusgreen | filter:statusyellow"> 
 
      <td>{{ co.no }}</td> 
 
      <td>{{ co.color }}</td> 
 
      <td>{{ co.info }}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    
 
</div>