Question

我有两个不同的div，其中包含复选框第一个div

  <div>
     <input type="checkbox" ng-true-value="1" ng-model="req_doc"> one
     <input type="checkbox" ng-true-value="2" ng-model="req_doc"> two
     <input type="checkbox" ng-true-value="3" ng-model="req_doc"> three
</div>

第二个div

<div>
    <input type="checkbox" ng-true-value="1" ng-model="pen_doc"> one
    <input type="checkbox" ng-true-value="2" ng-model="pen_doc"> two
    <input type="checkbox" ng-true-value="3" ng-model="pen_doc"> three
   </div>

我希望当我点击第一个div的复选框时，如果它在第二个div的复选框中选中，则自动从第二个div的复选框中取消选中它。

Answer 1

尝试为所有复选框提供相同的名称或ID：

<div>
    <input type="chckbox" ng-true-value="1" ng-model="pen_doc" name="chk1"> one
    <input type="chckbox" ng-true-value="2" ng-model="pen_doc" name="chk1"> two
</div>

这样您就可以一次选择一个复选框。

Answer 2

<input type="checkbox">应单独使用，绑定到其特定的模型变量。如果您想要多个“复选框”来指示单个变量的非重叠值集，请使用<input type="radio">：

<input type="radio" ng-model="pen_doc" value="1">
<input type="radio" ng-model="pen_doc" value="2">
<input type="radio" ng-model="pen_doc" value="3">

就你原来的问题而言，你可以在你的控制器中做这样的事情：

$scope.$watch('req_doc', function (value) {
    if ($scope.pen_doc == value) {    // change to `===` if your values are correctly typed
        $scope.pen_doc = 0;
    }
});

Answer 3

正在寻找这种类型

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>



</head>

<body ng-app="checkboxExample">
  <script>
    angular.module('checkboxExample', [])
      .controller('ExampleController', ['$scope',
        function($scope) {
          $scope.value1 = true;
          $scope.value2 = 'YES'
        }
      ]);
  </script>
  <form name="myForm" ng-controller="ExampleController">
    <div>
      <input type="checkbox" ng-true-value="1" ng-model="req_doc">one
      <input type="checkbox" ng-true-value="2" ng-model="req_doc">two
      <input type="checkbox" ng-true-value="3" ng-model="req_doc">three
    </div>


    <div>
      <input type="checkbox" ng-true-value="1" ng-checked="!req_doc">one
      <input type="checkbox" ng-true-value="2" ng-checked="!req_doc">two
      <input type="checkbox" ng-true-value="3" ng-checked="!req_doc">three
    </div>
  </form>
</body>

</html>

单击其他复选框时如何取消选中该复选框

3 个答案: