复选框的行为与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>