0

I have a few checkboxes. Some of them are selected by default on the basis of data from the database. A user can unselect the selected checkboxes or select the unselected ones. Is there any way to get the list of only those checkbox values which were toggled(this list can be produced on the click of the button once the user finally decide which checkboxes are to be toggled) ?

<ul>
    <li *ngFor="let file of files">
       <input type="checkbox" ng-selected = "file.isPresent"> {{file.type}}
    </li>
</ul>


 <button (click)="getToggledCheckboxValues()"> Get Value </button>

If the file is present already then the checkbox will be checked by default.

Improve this question

1 Answer 1

Reset to default
1

I will create an second array based on the files's one with default false values

toggledFiles = Array(this.files.length).fill(false);

Then add a change method for each checkbox like this

<ul>
  <li *ngFor="let file of files; let i = index">
    <input type="checkbox" (change)="onChange($event,i)" [checked]="file.isPresent"> {{file.type}}
  </li>
</ul>

And finally, just toggle the boolean value on your new array each time you toggle the corresponding checkbox's value

onChange(event, index) {
  this.toggledFiles[index] = !this.toggledFiles[index];
}

Here is a stackblitz to show you how it works.

On the example I directly show the toggle for each checkbox but you can keep it in your array and use it when you click on your getToggledCheckboxValues() button.

Second approach following your comment (Stackblitz edited too)

Create an empty array and append each new toggled checkbox.

onChange(event, index) {
  const indexFound = this.toggledFiles.indexOf(index);
  if (indexFound != -1) {
    this.toggledFiles.splice(indexFound, 1);
  } else {
    this.toggledFiles.push(index);
  }
}

If you want to keep the checkbox as toggled if it has been toggled once, even if user reset the value to started one, just remove the if condition and always push the index in the array

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

6 Comments

Great approach. But to find the actual toggled value (whether the final state is checked or unchecked) I will have to compare both array every time on button click (since on unchecking the previously checked items also I am getting "true"). In case of large number of data items, this solution will have greater time complexity. Right ? Also, is there a way to get the list of only those checkboxes which were toggled (without going through the whole list) ?
Finally, even if the user checked an unchecked box, then unchecked it again, you need the value in the array of toggled box ? Or do you just need the values that have a different value than started one ? I have editing the stackblitz and the answer with those two possibilities, let me know if it's ok now
yes. " just need the values that have a different value than started one " I think this will be the most optimized solution. Right ? The values should be the final values (either true or false) but these are the values which are different that the starting value.
Optimized I don't know, because in the case you create an array of same length, you just go to an index to change the value, but in the case you remove the value if it's update to the initial one, you need to get the current index of this value, and then remove it from your array, so there is more operations. As I said, I have updated the answer, does it fit your requirements ?
Your approach was very good. Thanks. And you are right about the number of operations. This does fit my requirements. Thank you very much.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.