Clear a list of checkboxes in React

Question

I have a few programatically generated lists of checkboxes (uncontrolled) in my project, and I'd like a react-way to clear them all at the click of a button. My problem is, I have no way to reference them each.

I've tried setting refs but I can't seem to figure out how to share refs between a stateless child and it's parent (is this even possible?)

All I need is a button that, when clicked, unchecks all checkboxes. I never would have imagined this would be so complicated but I've been at it for an hour now and my head is starting to spin. Here is an example of one of the lists:

{props.filters[0].map(jobType => (
  <li key={_.uniqueId('subType_')} className="checkbox text-sm m-b-sm">
    <label className="">
      <input type="checkbox" value={jobType.value} name="subtype" onChange={props.handleFilterCheck} />
      <span>{jobType.title}</span>
    </label>
    <span className="text-muted"></span>
  </li>
))}

So I have a way to consistently reference the size of the list and I know I could use iteration if I just had a way to reference the list but as it stands now that isn't possible. Any ideas?

Create a state variable (an object) that contains any checked checkbox, so initially it will be empty, when a checkbox is checked, add it to the state variable, and if the special uncheck all box is checked, clear the state variable to its default (an object). — fungusanthrax
– fungusanthrax, Commented Oct 4, 2017 at 20:01
this is basically what I did! after creating a checkbox component, I added a state variable as a set, not an object and from there it was trivial to manage the state of the checkboxes. Thank you for the inspiration! — Robbie Milejczak
– Robbie Milejczak, Commented Oct 6, 2017 at 14:27

Chase DeAnda · Accepted Answer · 2017-10-04 18:47:30Z

8

I've tried setting refs but I can't seem to figure out how to share refs between a stateless child and it's parent (is this even possible?)

It's not possible with functional components. refs only work on class components.

The other suggestion would be to convert all the checkbox to controlled inputs and then use props to pass in the checked state of false.

Or move the checkbox into it's own component that handles its own state:

{props.filters[0].map(jobType => (
    <li key={_.uniqueId('subType_')} className="checkbox text-sm m-b-sm">
        <CheckBox 
            value={jobType.value} 
            label={jobType.title}  
            onChange={props.handleFilterCheck}
            checked={/* Here you can manually override the checked state by passing in a bool */}
        />
        <span className="text-muted"></span>
    </li>
))}


class CheckBox extends Component {
    constructor (props) {
        super(props);
        this.state = {
            checked: props.checked || false
        }
    }
    render() {
        const { value, title, handleFilterCheck } = this.props;
        const { checked } = this.state;
        return (
            <label className="">
                <input type="checkbox" value={value} name="subtype" onChange={handleFilterCheck} checked={checked} />
                <span>{title}</span>
            </label>
        )
    }
}

EDIT:

And last but not least, you can straight up target all the elements and set checked to false using pure JS and dom manipulation.

document.querySelectorAll('input[type=checkbox]').forEach( el => el.checked = false );

edited Oct 4, 2017 at 18:47

answered Oct 4, 2017 at 18:14

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

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

3 Comments

Robbie Milejczak Over a year ago

The problem with handling the checked status in state is that I have 20+ different checkboxes, which would make my state super messy. Your second answer works but it's not very react-y

Chase DeAnda Over a year ago

You should create a <Checkbox /> component that handles it's own state. So instead of you parent component keeping track of all the checkboxes and their states, you would have 20+ <Checkbox /> components that handle their own state. Does that make sense?

Robbie Milejczak Over a year ago

Sure, but then how do I reference all the subtype checkbox components and uncheck them? As far as I can tell your vanilla js querySelector is the only way I can feasibly do what I'm trying to accomplish so I'm gonna mark this as the answer

fcdt · Accepted Answer · 2020-10-12 09:29:20Z

2

I managed to solve the same question by creating list of <Checkbox /> components. Then at parent level I used array state, which held all checked values. And one of the props to <Checkbox /> components was boolean which was telling if parent array state is empty.

const Parent = (someList) => {
  const [checkedArray,setCheckedArray] = useState([]);
  
  return(
    someList.map(el => <Checkbox key={el}
                                 empty={checkedArray.length === 0}
                                 value={el.value} /> 
                                 );
                                 );
                                 };
const Checkbox = ({empty, value}) => {
  const [checked, setChecked] = useState(false);
  
  useEffect(() => {
        empty && setChecked(false);
    }, [empty]);
    
  return(
    //some checkbox JSX
    );
    };

I'm newbie so there might be some pitfalls.

edited Oct 12, 2020 at 9:29

fcdt

2,5215 gold badges17 silver badges27 bronze badges

answered Oct 12, 2020 at 8:54

SunRock Baitulla

492 bronze badges

1 Comment

defend orca Over a year ago

useEffect is key, thank you, maybe, this is the only solution

jlewis90 · Accepted Answer · 2022-03-08 21:44:47Z

I came for this same problem, did a bit of thinking, and figured out a more "React" way.

I'm using checkboxes as a way to enter query parameters to call an api. We can use state to keep track of which checkboxes are currently checked. However, when rendering these checkboxes, we can set the checked attribute to be programmatically connected to our state. If the checkbox's value is in state, check it. Otherwise, don't.

We can then set up a button to reset this piece of state on click. Because state changes re-render the component, all of the checkboxes would re-render - setting checked to false.

const [selectedBoxes, setSelectedBoxes] = useState([]);
const renderCheckboxes = (items) => {
  return items.map(item => (
    <div key={item.id}>
      <input value={item.id} onChange={handleCheckbox} name="categories" checked={selectedBoxes.includes(item.id)} />
    </div>
  )
}
const handleCheckbox = (e) => {
  setSelectedBoxes([...selectedBoxes, e.target.value]);
}
return (
  <div>
    {renderCheckboxes()}
    <button onClick={setSelectedBoxes([])}>Click Me</button>
  </div>
)

T D Nguyen · Accepted Answer · 2024-10-18 01:10:48Z

0

Here is the trick in 2024! Passing the state to the input, not just the logic.

Instead of just

<input value={item.id} onChange={handleCheckbox} name="categories" 
checked={selectedBoxes.includes(item.id)} />

Use this selectedBoxes && selectedBoxes.includes(item.id)}:

<input value={item.id} onChange={handleCheckbox} name="categories" 
checked={selectedBoxes && selectedBoxes.includes(item.id)} />

This will trigger rerender when state of selectedBoxes changed.

edited Oct 18, 2024 at 1:10

answered Oct 17, 2024 at 23:35

T D Nguyen

7,7337 gold badges56 silver badges80 bronze badges

Collectives™ on Stack Overflow

Clear a list of checkboxes in React

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related