javascript - AngularJS - Uncheck Child Checkboxes on Parent Check -

javascript - AngularJS - Uncheck Child Checkboxes on Parent Check -

i have checkboxes on page 3 4 level of hierarchy. when first level checked level 2 checkboxes appear & on checking level 2 - level 3 checkboxes appear.

when user unchecks parent checkbox kid checkboxes should unchecked including radios.

here scenario.

i have made show hide work creating container div every kid & using ng-if. show hides container. how uncheck kid elements checkboxes?

sample code :-

<div class="col-sm-12"> <input type="checkbox" ng-model="todo.level1" /> <label>level 1</label> </div> <div class="col-sm-12" ng-show="todo.level1"> <!------- level 2 -------> <div class="col-sm-12"> <div class="col-sm-offset-1 col-sm-11" ng-if="todo.level1"> <input type="checkbox" ng-model="todo.c2" /> <label>&nbsp;c2</label> </div> <div class="col-sm-12" ng-show="todo.level2"> <div class="col-sm-12" ng-if="todo.level2"> <div class="margin-left-2"> <input type="checkbox" ng-model="todo.level3" /> <label>level 3 - 1</label> </div> </div> <div class="col-sm-12" ng-if="todo.level4"> <div class="margin-left-3"> <select id="select1"> <option>choose</option> <option>25%</option> <option>25-50%</option> <option>50%</option> </select> </div> </div> <div class="col-sm-12" ng-if="todo.c2"> <div class="margin-left-2"> <input type="checkbox" ng-model="todo.level3" /> <label>level 3 - 2</label> </div> </div> <div class="col-sm-12" ng-if="todo.level4"> <div class="margin-left-3"> <label>level 4 - 1</label><br /> <input type="radio" value="yes" /><label>&nbsp;yes</label> <input type="radio" value="no" /><label>&nbsp;no</label> </div> </div> </div> </div>

you have 2 options

1 watch changes

mod.controller('parentctrl', function($scope){ $scope.todo = {level1 : false};

$scope.$watch('todo.level1', function(val){ if(val === false){ // clear checkboxes } });

2 add together ng-init on kid div , set 'initial value' when div displayed i.e ng-init='todo.level2 =false' (this evaluated every time displayed)

div class="col-sm-offset-1 col-sm-11" ng-if="todo.level1" ng-init='todo.level2 = false'

javascript html angularjs checkbox