title: Change a boolean value in a array in the view Angular 2
body: <p>I have the following array in my component:</p>
  
  <pre><code>checkBox = [
          {label: 'SSN', name:'ssn', value: '1', checked:false},
          {label: 'Last Name', name:'lastName', value: '2', checked:false},
          {label: 'Role', name:'role', value: '3', checked:false},
          {label: 'UserId', name:'userId', value: '4', checked:false},
          {label: 'Office', name:'office', value: '5', checked:false},
          {label: ' Include Subordinates', name:'subordinates', value: '6', checked:false}
      ];
  </code></pre>
  
  <p>I have several checkboxes in my view that look like this:</p>
  
  <pre><code>&lt;span class="input-group-addon"&gt;
            &lt;input type="checkbox" name="ssn" (change)="checkBox[0].checked"&gt;
          &lt;/span&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;span class="input-group-addon"&gt;
            &lt;input type="checkbox" name="lastName" (change)=checkBox[1].value&gt;
          &lt;/span&gt;
  </code></pre>
  
  <p>etc....</p>
  
  <p>However when I it the submit button:</p>
  
  <p><code>&lt;button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button"&gt;Search&lt;/button&gt;</code></p>
  
  <p>I get the output false in the component even though it one is selected and I only get one false not 6 (They're 6 checkboxes)</p>
  
  <p>I was assuming I would get <code>false, false, True, False, False, False</code> because I need to know which checkbox is selected</p>
  
  <pre><code>  public search(e){
  
          for (let index = 0; index &lt; e.length; e++){
              console.log(e[index].checked)
          }
  
      }
  </code></pre>
  
  <p>full code:</p>
  
  <pre><code>&lt;form&gt;
          &lt;div class="col-lg-6 col-lg-offset-3 text-center bordered"&gt;
              &lt;div class=" col-xs-6 "&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12 box-content right"&gt;
                          &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;
            &lt;input type="checkbox" name="ssn" (change)="checkBox[0].checked=!checkBox[0].checked"&gt;
          &lt;/span&gt;
                              &lt;span class="input-group-addon"&gt;
            &lt;label&gt;{{checkBox[0].label}}&lt;/label&gt;
          &lt;/span&gt;
                              &lt;input #ssn type="password" name="ssnText" class="form-control" placeholder=" "&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12 box-content right"&gt;
                          &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;
            &lt;input type="checkbox" name="lastName" (change)="checkBox[1].checked=!checkBox[1].checked"&gt;
          &lt;/span&gt;
                              &lt;span class="input-group-addon"&gt;
            &lt;label&gt;{{checkBox[1].label}}&lt;/label&gt;
          &lt;/span&gt;
                              &lt;input type="text" #lastName name="lastNameTest" class="form-control" placeholder=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12 box-content right"&gt;
                          &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;
            &lt;input type="checkbox" name="role" (change)="checkBox[3].checked=!checkBox[3].checked"&gt;
          &lt;/span&gt;
                              &lt;span class="input-group-addon"&gt;
            &lt;label&gt;{{checkBox[2].label}}&lt;/label&gt;
          &lt;/span&gt;
                              &lt;input type="text" #role name="roleText" class="form-control" placeholder=" "&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=" text-center col-xs-6"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12 box-content "&gt;
                          &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;
            &lt;input type="checkbox" name="userId" (change)="checkBox[4].checked=!checkBox[4].checked"&gt;
          &lt;/span&gt;
                              &lt;span class="input-group-addon"&gt;
            &lt;label&gt;{{checkBox[3].label}}&lt;/label&gt;
          &lt;/span&gt;
                              &lt;input type="text" #userId name="userIdText" class="form-control" placeholder=" "&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12 box-content "&gt;
                          &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;
            &lt;input type="checkbox" value="{{checkBox[4].value}}"&gt;
          &lt;/span&gt;
                              &lt;span class="input-group-addon"&gt;
            &lt;label for="office"&gt;{{checkBox[4].label}}&lt;/label&gt;
          &lt;/span&gt;
                              &lt;input type="text" #office id="office" name="officeText" class="form-control" placeholder=" "&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12 box-content "&gt;
                          &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;
            &lt;input type="checkbox"  #subordinates name="subText" (change)="checkBox[5].checked=!checkBox[5].checked"&gt;
          &lt;/span&gt;
                              &lt;span class="input-group-addon"&gt;
            &lt;label&gt;Include Subordinates&lt;/label&gt;
          &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="center-block"&gt;
                  &lt;button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button"&gt;Search&lt;/button&gt;
                  &lt;button type="submit" class="btn btn-default btn-md right-button"&gt;Reset&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>