AngularJS - Uncheck Child Checkboxes on Parent Check

Question

I have Checkboxes on my page with a 3 to 4 level of hierarchy. When first level is checked then Level 2 Checkboxes appear & on checking Level 2 - Level 3 Checkboxes appear.

When User Unchecks the parent Checkbox all the child checkboxes should be unchecked including radios.

Here is the Scenario.

enter image description here

I have made show hide work by creating a container div for every child & then using ng-if. This only show hides the container. But How do i Uncheck all the child 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>

i managed to create a fiddle....but it is incomplete...check this jsfiddle.net/4PL3E — Anup
– Anup, Commented Jun 24, 2014 at 6:02

marcinn · Accepted Answer · 2014-06-24 08:37:13Z

1

you have two options

1 watch for changes

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

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

2 add ng-init on child div and set the 'initial value' when the div is displayed i.e ng-init='todo.level2 =false' (this will be evaluated every time its displayed)

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

answered Jun 24, 2014 at 8:37

marcinn

1,78611 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anup Over a year ago

The second option worked for me...saved lot of time...thanks..>!

Collectives™ on Stack Overflow

AngularJS - Uncheck Child Checkboxes on Parent Check

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related