Angular 2 Get Values of Multiple Checked Checkboxes

Question

My problem is really simple  I have a list of checkboxes like this    lt div class  form-group  gt       lt label for  options  gt Options   lt  label gt       lt label  ngFor   option of options  class  form-control  gt           lt input type  checkbox  name  options  value  option    gt    option        lt  label gt   lt  div gt    And I would like to send an array of the selected options  something like   option1  option5  option8  if options 1  5 and 8 are selected  This array is part of a JSON that I would like to send via an HTTP PUT request   Thanks for your help

User · Answer

I have just simplified little bit for those whose are using list of value Object. XYZ.Comonent.html

<div class="form-group">
        <label for="options">Options :</label>
        <div *ngFor="let option of xyzlist">
            <label>
                <input type="checkbox"
                       name="options"
                       value="{{option.Id}}"

                       (change)="onClicked(option, $event)"/>
                {{option.Id}}-- {{option.checked}}
            </label>
        </div>
        <button type="submit">Submit</button>
    </div>

** XYZ.Component.ts**.

create a list -- xyzlist.
assign values, I am passing values from Java in this list.
Values are Int-Id, boolean -checked (Can Pass in Component.ts).

Now to get value in Componenet.ts.

xyzlist;//Just created a list
onClicked(option, event) {
    console.log("event  " + this.xyzlist.length);
    console.log("event  checked" + event.target.checked);
    console.log("event  checked" + event.target.value);
    for (var i = 0; i < this.xyzlist.length; i++) {
        console.log("test --- " + this.xyzlist[i].Id;
        if (this.xyzlist[i].Id == event.target.value) {
            this.xyzlist[i].checked = event.target.checked;
        }
        console.log("after update of checkbox" + this.xyzlist[i].checked);

    }

User · Answer

Here s a solution without map   checked  properties and FormControl   app component html    lt div  ngFor  let item of options  gt     lt input type  checkbox      change   onChange  event target checked  item      checked   checked item    gt      item    lt  div gt    app component ts     options     1    2    3    4    5     selected     1    2    5         check if the item are selected   checked item       if this selected indexOf item     -1         return true                  when checkbox change  add remove the item from the array   onChange checked  item       if checked       this selected push item         else         this selected splice this selected indexOf item   1              DEMO

User · Answer

Since I spent a long time solving a similar problem  I m answering to share my experience  My problem was the same  to know  getting many checkboxes value after a specified event has been triggered  I tried a lot of solutions but for me the sexiest is using ViewChildren   import   ViewChildren  QueryList   from   angular core        Get handle on cmp tags in the template     ViewChildren  cmp   components  QueryList lt any gt    ngAfterViewInit           print array of CustomComponent objects     console log this components toArray         Found here  https   stackoverflow com a 40165639 4775727  Potential other solutions for ref  there are a lot of similar topic  none of them purpose this solution       Angular 6  How to build a simple multiple checkbox to be checked unchecked by the user  Angular 6 How To Get Values From Multiple Checkboxes and Send in From Angular how to get the multiple checkbox value  Angular 2  Get Values of Multiple Checked Checkboxes https   medium com  vladguleaev reusable-angular-create-multiple-checkbox-group-component-84f0e4727677 https   netbasal com handling-multiple-checkboxes-in-angular-forms-57eb8e846d21 https   medium com  shlomiassaf the-angular-template-variable-you-are-missing-return-of-the-var-6b573ec9fdc https   www bennadel com blog 3205-using-form-controls-without-formsmodule-or-ngmodel-in-angular-2-4-1 htm How to get checkbox value in angular 5 app Angular 2  Get Values of Multiple Checked Checkboxes Filter by checkbox in angular 5 How to access multiple checkbox values in Angular 4 5

User · Answer

I just faced this issue  and decided to make everything work with as less variables as i can  to keep workspace clean  Here is example of my code   lt input type  checkbox   change   changeModel  event  modelArr  option value    checked   modelArr includes option value     gt    Method  which called on change is pushing value in model  or removing it   public changeModel ev  list  val      if  ev target checked        list push val       else       let i   list indexOf val       list splice i  1

User · Answer

create a list like  -  this xyzlist             id  1      value   option1               id  2      value   option2           Html  -   lt div class  checkbox   ngFor  let list of xyzlist  gt               lt label gt                 lt input formControlName  interestSectors  type  checkbox  value    list id     change   onCheckboxChange list  event   gt   list value   lt  label gt             lt  div gt    then in it s component ts  -  onCheckboxChange option  event         if event target checked           this checkedList push option id          else        for var i 0   i  lt  this xyzlist length  i             if this checkedList i     option id             this checkedList splice i 1                       console log this checkedList

User · Answer

I hope this would help someone who has the same problem   templet html   lt form  formGroup     myForm   ngSubmit     confirmFlights myForm value   gt     lt ng-template ngFor  ngForOf   flightList  let-flight let-i  index   gt        lt input type  checkbox   value   flight id  formControlName  flightid            change   flightids i    event target checked  event target getAttribute  value      gt     lt  ng-template gt   lt  form gt    component ts  flightids array will have another arrays like this      true   id 1      false   id 2      true   id 3       here true means user checked it  false means user checked then unchecked it  The items that user have never checked will not be inserted to the array   flightids        confirmFlights value           console log this flightids        let confirmList           this flightids forEach id   gt          if id 0      here  true means that user checked the item          confirmList push this flightList find x   gt  x id     id 1                   console log confirmList

User · Answer

I have find a solution thanks to Gunter  Here is my whole code if it could help anyone    lt div class  form-group  gt               lt label for  options  gt Options   lt  label gt               lt div  ngFor   option of options   i   index  gt                   lt label gt                       lt input type  checkbox                             name  options                             value    option                                checked   options indexOf option   gt   0                              change   updateCheckedOptions option   event    gt                        option                    lt  label gt               lt  div gt           lt  div gt    Here are the 3 objects I m using   options     OptionA    OptionB    OptionC    optionsMap             OptionA  false          OptionB  false          OptionC  false     optionsChecked         And there are 3 useful methods   1  To initiate optionsMap   initOptionsMap         for  var x   0  x lt this order options length  x              this optionsMap this options x     true            2  to update the optionsMap   updateCheckedOptions option  event       this optionsMap option    event target checked      3  to convert optionsMap into optionsChecked and store it in options before sending the POST request   updateOptions         for var x in this optionsMap            if this optionsMap x                 this optionsChecked push x                       this options   this optionsChecked      this optionsChecked

User · Answer

ccwasden solution above works for me with a small change  each checkbox must have a unique name otherwise binding wont works   lt div class  form-group  gt       lt label for  options  gt Options  lt  label gt       lt div  ngFor  let option of options  let i   index  gt           lt label gt               lt input type  checkbox                     name  options   i                       value    option value                         ngModel    option checked   gt                option name            lt  label gt       lt  div gt   lt  div gt      my component ts   Component   moduleId module id  templateUrl  my component html     export class MyComponent     options          name  OptionA   value  1   checked true        name  OptionB   value  2   checked false        name  OptionC   value  3   checked true         get selectedOptions        right now    1   3       return this options                filter opt   gt  opt checked                 map opt   gt  opt value          and also make sur to import FormsModule in your main module  import   FormsModule   from   angular forms     imports        FormsModule

User · Answer

Here s a simple way using ngModel  final Angular 2    lt  -- my component html -- gt    lt div class  form-group  gt       lt label for  options  gt Options  lt  label gt       lt div  ngFor  let option of options  gt           lt label gt               lt input type  checkbox                     name  options                     value    option value                         ngModel    option checked   gt                option name            lt  label gt       lt  div gt   lt  div gt         my component ts   Component   moduleId module id  templateUrl  my component html     export class MyComponent     options          name  OptionA   value  1   checked true        name  OptionB   value  2   checked false        name  OptionC   value  3   checked true         get selectedOptions        right now    1   3       return this options                filter opt   gt  opt checked                 map opt   gt  opt value

User · Answer

lt input type  checkbox  name  options  value  option   change   updateChecked option   event     gt    export class MyComponent     checked  boolean           updateChecked option  event        this checked option  event     or  event target value  not sure what this event looks like

User · Answer

In Angular 2  to 9 using Typescript  Source Link    we can use an object to bind multiple Checkbox    checkboxesDataList                 id   C001         label   Photography         isChecked  true                    id   C002         label   Writing         isChecked  true                    id   C003         label   Painting         isChecked  true                    id   C004         label   Knitting         isChecked  false                    id   C004         label   Dancing         isChecked  false                    id   C005         label   Gardening         isChecked  true                    id   C006         label   Drawing         isChecked  true                    id   C007         label   Gyming         isChecked  false                    id   C008         label   Cooking         isChecked  true                    id   C009         label   Scrapbooking         isChecked  false                    id   C010         label   Origami         isChecked  false             In HTML Template use     lt ul class  checkbox-items  gt       lt li  ngFor  let item of checkboxesDataList  gt         lt input type  checkbox    ngModel    item isChecked   change   changeSelection    gt   item label        lt  li gt     lt  ul gt    To get selected checkboxes  add the following method in class       Selected item   fetchSelectedItems         this selectedItemsList   this checkboxesDataList filter  value  index    gt          return value isChecked                   IDs of selected item   fetchCheckedIDs         this checkedIDs          this checkboxesDataList forEach  value  index    gt          if  value isChecked            this checkedIDs push value id

User · Answer

I have encountered the same problem and now I have an answer I like more  may be you too   I have bounded each checkbox to an array index   First I defined an Object like this   SelectionStatusOfMutants  any         Then the checkboxes are like this    lt input  ngFor  let Mutant of Mutants  type  checkbox    ngModel    SelectionStatusOfMutants Mutant Id    value   Mutant Id    gt    As you know objects in JS are arrays with arbitrary indices  So the result are being fetched so simple   Count selected ones like this   let count   0      Object keys SelectionStatusOfMutants  forEach  item  index    gt            if  SelectionStatusOfMutants item               count              And similar to that fetch selected ones like this   let selecteds   Object keys SelectionStatusOfMutants  filter  item  index    gt            return SelectionStatusOfMutants item             You see   Very simple very beautiful  TG

[json] Angular 2: Get Values of Multiple Checked Checkboxes

Examples related to json

Examples related to forms

Examples related to checkbox

Examples related to angular

Examples related to angular2-forms