Office UI Fabric Checkbox - How to Uncheck multiple check boxes at once through code

Question

I render multiple checkboxes for a filter overlay. Now i want to clear all the checkboxes on a click of a button. How can i do this?

I render the checkboxes like this:

{
    filter.Choices.map((choice: any) => ( 
        <Checkbox 
        title = {filter.InternalName}
        label = {choice}
        onChange = {this._makeChangeHandler(choice, filter.InternalName, filter.Id)}
        />
    ))
}

Here is how i render my clear filter button:

<DefaultButton className={style.overlayClearButton} onClick={this._clearFilters}>Clear Filters</DefaultButton>

I want to uncheck all the checkboxes when i click the "Clear Filters" button.

J.Benda · Answer 1 · 2019-12-19T20:37:38.563

you can use a controlled Checkbox for this. It´s basically the same, but you control the value of your checkbox on your own. Store this with your filter.Choices objects

filter.Choices.map((choice: any) => ( 
        <Checkbox 
        title = {filter.InternalName}
        label = {choice.label}
        onChange = {this._makeChangeHandler(choice, filter.InternalName, filter.Id)}
        checked={choice.isChecked}
        />
    ))

And on your button click you can now unset all checkboxes:

//Clear isChecked values of choices and set state for rerender
public _clearFilters() {
    this.setState(state => ({...state, filter: state.filter.Choices.map(choice => {choice.isChecked = false; return choice;}))});
}

The solution depends on how you handle state in your application. But the best way is to control the checkbox state yourself.

I hope this helps,

greetings joe

for more sharepoint related help look at https://www.smarterbusiness.at/smarter-blog

Office UI Fabric Checkbox - How to Uncheck multiple check boxes at once through code

1 Answers1