logo
Tags down

shadow

pass id of the selected checkbox(which areloaded with ngFor) when it is checked


By : Andy Poulsen
Date : September 15 2020, 12:00 AM
seems to work fine , if you pass the $event:
code :
(change)="getAnswers($event)"
getAnswers(event) {
   if (event.target.checked) {
      console.log('checked: ' + event.target.id);
   } else {
      console.log('unchecked: ' + event.target.id);
   }
}


Share : facebook icon twitter icon

Angular 2: Default checked on checkbox in ngFor


By : YN Raja
Date : March 29 2020, 07:55 AM
I wish this help you This solved my problem with the checked/unchecked checkboxes, while I still had control over changes in my variables.
HTML
code :
<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags; let i = index;">
    <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tagOptions"
        (change)="changeCheckbox(i)"
        [checked]="tag.checked">
      {{tag.name}}
    </label>
  </div>
  changeCheckbox(tags, i) {
    if (tags) {
      this.tags[i].checked = !this.tags[i].checked;
    }
  }

checkbox inside ngFor, only first checkbox is getting selected & deselected everytime when clicking any other checkb


By : SD2011
Date : March 29 2020, 07:55 AM
Hope this helps Check value for name, you've used different for each element: num.value. This should be the same so that it works:
code :
<div *ngFor="let num of count" class="m-b-20">
    <div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> 
    <label for="check"></label> </div>{{num.checked}}
</div>

How to get mat-checkbox checked value if used in ngFor


By : user3498014
Date : March 29 2020, 07:55 AM
this one helps. You can get Total working example in this StackBlitz Link
Your html is, and onChange of checkbox getCheckbox() event fire. here we are passing template reference variable #checkBox.
code :
<div *ngFor ="let item of items">
     <mat-checkbox #checkBox [value]="item" (change)="getCheckbox(checkBox)">  
          {{item}} 
     </mat-checkbox>
</div>

<div *ngFor="let checkedItem of checked">
     <span> selected Key is: <strong>   {{checkedItem.value }} </strong> : 
            <strong> {{checkedItem.checked}} </strong> 
     </span>
</div>
  @ViewChildren ('checkBox' ) checkBox:QueryList<any>;
    checked = [];
    items =['one','two', 'three', 'four'];

  getCheckbox(checkbox){
      this.checked = []; // resetting each Time new event is fire.
   // filtering only checked vlaue and assign to checked variable.
    const checked = this.checkBox.filter(checkbox => checkbox.checked);

   // then, we make object array of checked, and value by checked variable  
      checked.forEach(data => {
           this.checked.push ({
               'checked' : data.checked,
               'value':  data.value
           })
      })
  }

Multiple Checkbox selected elements pass to array and from another array show selected as checked in vue js


By : user3709074
Date : March 29 2020, 07:55 AM
With these it helps Am very new to vue js and need a way where I have multiple checkboxes and when I select them an array gets updated with the checked elements with Vue JS. Eg :
code :
new Vue({
  el: "#app",
  data: {
    items: [
      { label: 'Red', value: 'red' },
      { label: 'Blue', value: 'blue' },
      { label: 'Green', value: 'green' },
    ],
    checkedValues: [],
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label 
    v-for="(item, index) in items"
    :key="index"
   >
    {{ item.label }}
    <input 
     type="checkbox"
     :value="item.value"
     v-model="checkedValues"
    />
  </label>
  {{ checkedValues }}
</div>

How to get checked id from checkbox and pass selected id in to url by query param and fetch in other component?


By : aheve
Date : March 29 2020, 07:55 AM
it fixes the issue Working demo
in Class file
code :
   list: any = [
        {id:1, 'name': 'aaa', 'age': 22, 'date': '12-06-2019'},
        {id:2, 'name': 'bbb', 'age': 23, 'date': '13-06-2019'},
        {id:3, 'name': 'ccc', 'age': 25, 'date': '21-09-2019'}
   ];
checkedItems: any = [];
 onChecked(item: any, event: any){
    let {checked, value} = event.target;
    if(checked) {
      this.checkedItems.push(value);
    } else {
      let index = this.checkedItems.indexOf(value);
      if (index !== -1) this.checkedItems.splice(index, 1);
    }
  }
 this.router.navigate(['/other'], {relativeTo: this.route, queryParams: { id: this.checkedItems.join() } });
 <ng-container *ngFor="let item of list">
      <tr>
        <td>
          <input 
            type="checkbox" 
            [value]="item.id" 
            (change)="onChecked(item, $event)">
        </td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.date}}</td>
      </tr>
    </ng-container>
Related Posts Related Posts :
  • How to properly style checkbox with letter in it?
  • Problem displaying <ul> element inside div
  • Could not change footer's backgroud color
  • How to store update data on modal laravel
  • left sticky position not working on smaller screens (keep sticky div width)
  • Change the color of a led on html
  • how to send a form data to server using post api in angular 7
  • how to remove firefox's Default Dropdown for input html
  • liquid variables stop working when layout is defined
  • Angular 7 :Apply style sheet to input field on change of value i.e when Entered date is less than current date
  • how to attach an arrow at the end of ellipsis dots
  • placing a div after a css ::after
  • h3 text its been overflown
  • Force footer to be alway in the bottom in CSS
  • How to implement scrollbar for particular row in html
  • Dropdown Bootstrap 4 doesn't work in production of angular's application
  • What's the difference in the order of applying selectors
  • What does CSS width 100% actually means for block element?
  • Fitting the image in the cell
  • Is there a way to add an edge to the curve gradient?
  • media queries not working on mobile screen size
  • Absolute position in CSS
  • How to align an image in a list ( ul > li ) in HTML/CSS?
  • How does this specific line of code work?
  • Why Does CSS in style Tag trum main.css?
  • SVG circle should adapt to CSS grid height without overlapping
  • <b-form-select-option> not working in Bootstrap Vue
  • How to show the same element when hovering a li using only CSS?
  • Can you have one Style and put all CSS code inside?
  • What is the use of class="container" attribute inside <div> tag in bootstrap?
  • Spacing between element like tab functionality
  • background-image Property of Css is not working
  • CSS not working in HTML file - potential browser issue?
  • Little icon images added to span class inside <li> tags?
  • Could someone please explain what exactly "Overflow" in CSS does to a background in this example?
  • How do i add a border to a background shape as made in my code?
  • How to fix a paragraph tag overflowing on css column?
  • Bind Html with variables in Angular
  • How can I make a percentage circle like google?
  • can an <small> be inside a <p> tag?
  • Creating this type of grid
  • Media queries not working despite simple use
  • How can a text can be moved with the mouse pointer on an image when hovering in css or html without using JQuery
  • How to remove the light blue frame in gojs's example "productionProcess"?
  • angular 8 i have problem in sending id in angular
  • Div does not support two images
  • How to conditionally render a DIV and REACT component for OPENING and CLOSING tags?
  • Set the text-align to be center from css not working
  • Trying to align 3 images and 3 texts on the same line with flexbox
  • Trouble formatting table
  • Replaced navbar has a stylesheet conflicting with the old one, despite removing old stylesheet
  • CSS not formatting page due to incorrect usage of div id tag or could it be due to files not called right?
  • Implementing a custom CSS skill bar
  • About CSS and HTML
  • Who to draw and fill two slightly offset curves with the Canvas API
  • Webgl or graphics card problem with the shader effect
  • How to align footer to bottom
  • What is wrong with this SVG file?
  • My website is having trouble implementing external CSS, but was working fine with internal CSS. What is the issue with m
  • While I hove on image hover effect are not showing. Also I can use overlay on image
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk