CODEWITHSUNDEEP
angularjscheckbox
user3056158
user3056158

Reputation: 719

How to uncheck the checkbox when click on other checkbox

I have two different div which containing check box first 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>

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

I want when i click on first div's check box if it selected in second div's check box then automatically unchecked it from second div's check box.

Upvotes: 0

Views: 6601

Answers (3)

yugi
yugi

Reputation: 874

are looking this type

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

Upvotes: 0

hon2a
hon2a

Reputation: 7214

<input type="checkbox"> should be used alone, bound to its specific model variable. If you want multiple "checkboxes" indicating the set of non-overlapping values of a single variable, use <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">

As far as your original question goes, you could just do something like this in your controller:

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

Upvotes: 1

Raghu K
Raghu K

Reputation: 11

try by giving the same Name or ID to all the checkboxes examples:

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

so that you can select one checkbox at a time.

Upvotes: 1

Related Questions