How to check if any Checkbox is checked in Angular

Question

Is there any function or ng-something to check if any of the displayed Checkboxes are checked   I have the values through the ng-click  function    and pass the values through  I can go by foot and check my array if any value is inside      I want to activate deactivate the  next -button if any Checkbox is   checked    What s the easiest way

User · Answer

Try to think in terms of a model and what happens to that model when a checkbox is checked.

Assuming that each checkbox is bound to a field on the model with ng-model then the property on the model is changed whenever a checkbox is clicked:

<input type='checkbox' ng-model='fooSelected' />
<input type='checkbox' ng-model='baaSelected' />

and in the controller:

$scope.fooSelected = false;
$scope.baaSelected = false;

The next button should only be available under certain circumstances so add the ng-disabled directive to the button:

<button type='button' ng-disabled='nextButtonDisabled'></button>

Now the next button should only be available when either fooSelected is true or baaSelected is true and we need to watch any changes to these fields to make sure that the next button is made available or not:

$scope.$watch('[fooSelected,baaSelected]', function(){
    $scope.nextButtonDisabled = !$scope.fooSelected && !scope.baaSelected;
}, true );

The above assumes that there are only a few checkboxes that affect the availability of the next button but it could be easily changed to work with a larger number of checkboxes and use $watchCollection to check for changes.

User · Answer

I ve a sample for multiple data with their subnode  3 list   each list has attribute and child attribute   var list1         name   Role A       name selected  false      subs             sub   Read           id  1          selected  false                  sub   Write           id  2          selected  false                  sub   Update           id  3          selected  false            var list2         name   Role B       name selected  false      subs             sub   Read           id  1          selected  false                  sub   Write           id  2          selected  false            var list3         name   Role B       name selected  false      subs             sub   Read           id  1          selected  false                  sub   Update           id  3          selected  false              Add these to Array    newArr push list1   newArr push list2   newArr push list3    scope itemDisplayed   newArr    Show them in html    lt li ng-repeat  item in itemDisplayed  class  ng-scope has-pretty-child  gt       lt div gt           lt ul gt               lt input type  checkbox  class  checkall  ng-model  item name selected  ng-click  toggleAll item     gt               lt span gt   item name   lt  span gt               lt div gt                   lt li ng-repeat  sub in item subs  class  ng-scope has-pretty-child  gt                       lt input type  checkbox  kv-pretty-check    ng-model  sub selected  ng-change  optionToggled item item subs   gt  lt span gt   sub sub   lt  span gt                   lt  li gt               lt  div gt           lt  ul gt       lt  div gt   lt  li gt    And here is the solution to check them    scope toggleAll   function item        var toogleStatus    item name selected      console log toogleStatus       angular forEach item  function             angular forEach item subs  function sub                sub selected   toogleStatus                           scope optionToggled   function item  subs        item name selected   subs every function itm            return itm selected             jsfiddle demo

User · Answer

If you don t want to use a watcher  you can do something like this    lt input type  checkbox  ng-init  checkStatus false  ng-model  checkStatus  ng-click  doIfChecked checkStatus   gt

User · Answer

If you have only one checkbox  you can do this easily with just ng-model    lt input type  checkbox  ng-model  checked   gt   lt button ng-disabled   checked  gt  Next  lt  button gt    And initialize  scope checked in your Controller  default false   The official doc discourages the use of ng-init in that case

User · Answer

This is re-post for insert code also  This example included  - One object list - Each object hast child list  Ex     var list1         name   Role A       name selected  false      subs           sub   Read         id  1        selected  false                sub   Write         id  2        selected  false                sub   Update         id  3        selected  false                I ll 3 list like above and i ll add to a one object list  newArr push list1     newArr push list2     newArr push list3     Then i ll do how to show checkbox with multiple group    scope toggleAll   function item        var toogleStatus    item name selected      console log toogleStatus       angular forEach item  function           angular forEach item subs  function sub            sub selected   toogleStatus                             scope optionToggled   function item  subs        item name selected   subs every function itm          return itm selected              scope txtRet   item name selected        HTML    lt li ng-repeat  item in itemDisplayed  class  ng-scope has-pretty-child  gt         lt div gt           lt ul gt             lt input type  checkbox  class  checkall  ng-model  item name selected  ng-click  toggleAll item   gt  lt span gt   item name   lt  span gt             lt div gt               lt li ng-repeat  sub in item subs  class  ng-scope has-pretty-child  gt                 lt input type  checkbox  kv-pretty-check    ng-model  sub selected  ng-change  optionToggled item item subs   gt  lt span gt   sub sub   lt  span gt               lt  li gt             lt  div gt           lt  ul gt         lt  div gt         lt span gt   txtRet   lt  span gt       lt  li gt    Fiddle  example

User · Answer

You can do something like    function ChckbxsCtrl  scope   filter         scope chkbxs              label   Led Zeppelin           val  false                  label   Electric Light Orchestra           val  false                  label   Mark Almond           val  false               scope  watch  chkbxs   function n  o            var trues    filter  filter   n                val  true                      scope flag   trues length         true       And a template    lt div ng-controller  ChckbxsCtrl  gt       lt div ng-repeat  chk in chkbxs  gt           lt input type  checkbox  ng-model  chk val    gt           lt label gt   chk label   lt  label gt       lt  div gt       lt div ng-show  flag  gt I m ON when band choosed lt  div gt   lt  div gt    Working  http   jsfiddle net cherniv JBwmA   UPDATE  Or you can go little bit different way   without using  scope s  watch   method  like    scope bandChoosed   function         var trues    filter  filter    scope chkbxs            val  true             return trues length      And in a template do    lt div ng-show  bandChoosed    gt I m ON when band choosed lt  div gt    Fiddle  http   jsfiddle net uzs4sgnp

[angularjs] How to check if any Checkbox is checked in Angular

Examples related to angularjs

Examples related to checkbox