How to fix checkbox select and deselect issue in angular js?

Question

In my angular js project, I have four checkboxes. in that four checkboxes, three checkboxes have three conditions (like ng-hide and ng-show) and one checkbox has select all and deselects all conditions.

everything working fine. but initially if you select, select all checkbox everything got selected and conditions also working fine(other three checkboxes also got selected). but later without deselecting all checkbox if you uncheck the other three checkboxes that condition (like ng-hide and ng-show) not working.

Any way to fix this?

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
 

<div ng-app>
    <div class="choose-group pt-0">
                  <input
                    type="checkbox"
                    ng-model="exptResultType.status"
                    value="1" >status
                  <input
                    type="checkbox"
                    ng-model="exptResultType.headercontent"
                    value=2>header
                  <input
                    ng-show="addNlpStepForm.restfulEntity.method != 'HEAD'"
                    type="checkbox"
                    ng-model="exptResultType.bodycontent"
                    value=3>body

                  <input
                    type="checkbox"
                    id="all"
                    ng-click="(exptResultType.status=exptResultType.all);
                              (exptResultType.headercontent=exptResultType.all);
                              (exptResultType.bodycontent=exptResultType.all)"
                    ng-checked="exptResultType.status&&exptResultType.headercontent&&
                                exptResultType.bodycontent"
                  
                    name="exptResultType"
                    ng-model="exptResultType.all"
                    value=4>all
                </div>
                <!--  show status content-->
              <div class="form-group pb-30 ts-col-100"
                   ng-show="(exptResultType.status==true)||(exptResultType.all==true)" >
                status code
              </div>

              <!-- header content -->
              <div class="form-group d-flex flex-wrap ts-col-100 pb-10"
                   ng-show="(exptResultType.headercontent==true)||(exptResultType.all==true)">
               header
              </div>

              <!-- body content  -->
              <div class="form-group pb-0 ts-col-100" ng-show="(exptResultType.bodycontent==true)||(exptResultType.all==true)">
              body
                </div>
                
</div>

AliNajafZadeh · Accepted Answer · 2022-08-04 22:10:12Z

1

The problem is that exptResultType.all will still be true, while the checkbox for all is coupled to the other three values, the property itself is not. The easiest thing to do is ignore the fact it exists for computation purposes:

<!--  show status content-->
<div class="form-group pb-30 ts-col-100"
  ng-show="exptResultType.status">
    status code
</div>

<!-- header content -->
<div class="form-group d-flex flex-wrap ts-col-100 pb-10"
  ng-show="exptResultType.headercontent">
header
</div>

<!-- body content  -->
<div class="form-group pb-0 ts-col-100"
  ng-show="exptResultType.bodycontent">
body
</div>

edited Aug 4, 2022 at 22:10

AliNajafZadeh

1,3342 gold badges15 silver badges26 bronze badges

answered Jun 8, 2020 at 12:07

Warren Parad

4,1402 gold badges22 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

How to fix checkbox select and deselect issue in angular js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related