Remove deselected checkbox value from Array using Angular

Question

This is simple one but i still somehow couldn't get it to work.

I have default value checked, checkbox. So when edit, of course the default value is chosen, but later I want to remove the default value and choose another value. Here it is

array1=[] //empty

After I check a checkbox, it will inserted to this array

array1=["sun"]

If I select 3 values (array1["sun","stars","moon"]) but I deselect the first selection (the default selection), it will be still in the array. (array1["sun","stars","moon"]) but I the expected result is this:

array1["stars","moon"]

No more first selection. So how to remove deselected value from array using Angular/Javascript?

I have tried use splice, remove and set

Vivek Doshi · Accepted Answer · 2017-04-06 06:29:57Z

2

Same thing developed and used in project :

Template side :

<label *ngFor="let hobby of hobbies" #checkbox class="mdl-checkbox mdl-js-checkbox">
    <input type="checkbox" name="hobbies" [value]="hobby" 
    (change)="populateMyHobbies(hobby,$event.target.checked)" class="mdl-checkbox__input">
    <span class="mdl-checkbox__label">{{hobby}}</span>
</label>

Component Side :

selectedHobbies = [];

populateMyHobbies(value , status:boolean)
{
    if(this.selectedHobbies.indexOf(value) === -1 && status)
    {
        this.selectedHobbies.push(value);
    }
    else if(!status)
    {
        let index = this.selectedHobbies.indexOf(value);
        this.selectedHobbies.splice(index, 1);
    }
}

Here selectedHobbies will give you what you want.

Have to change just name as per your app.

answered Apr 6, 2017 at 6:29

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

2 Comments

user3431310 Over a year ago

tq vivek, but my code still adding the default value. but it is ok, you code helped me too. let me try again

Vivek Doshi Over a year ago

Thanks , @user3431310

Trash Can · Accepted Answer · 2017-04-06 06:31:16Z

1

i used it once in my project. change the code according to your need. logic is same.

html part

<input type="checkbox" value="{{category._id}}" (change)="pushpopcategory(category._id)" id="{{category._id}}">

component code

pushpopcategory(value) {
        if ((<HTMLInputElement>document.getElementById(value)).checked) {
            this.categoryAdd.push(value);
        } else {
            let indexx = this.categoryAdd.indexOf(value);
            this.categoryAdd.splice(indexx, 1);
        }
    }

edited Apr 6, 2017 at 6:31

Trash Can

6,8325 gold badges27 silver badges40 bronze badges

answered Apr 6, 2017 at 6:12

Amit kumar

6,1676 gold badges32 silver badges40 bronze badges

4 Comments

Trash Can Over a year ago

Your if-else gives me goosebumps. Also, please remove spaces in <> to avoid confusion for potential readers

Amit kumar Over a year ago

@Dummy my friend you can change format. i will accept you edit.

user3431310 Over a year ago

hi @AmitSuhag i did have this code , i have tried , it is not working, coz this type of code will only work when the user click and unclick. but what about if the default value is there and pushed inside array. so evrytime i click submit it will go to this default value n pushed and later if user dont want , it supposed to removed(coz we used spliced there), but unfortunately it is not removed....

Amit kumar Over a year ago

@user3231310 you have not mention anything in question. this code is for adding and removing into array. try console.log in your code it may help to detect issue. add plnkr of your code if possible

Collectives™ on Stack Overflow

Remove deselected checkbox value from Array using Angular

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related