How to check/uncheck a checkbox with onClick event on a button in React.js?

Question

import React from 'react';
import './App.css';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <div>
      <input type="checkbox" id="checkboxForHamburger" />

      <Button onClick={??????}> UNCHECK </Button>
    </div>
  );
}

export default App;

I have a Checkbox and a Button. I want the checkbox to be in "unchecked" state if the button is clicked.

What I tried-

<Button onClick={document.getElementById("checkboxForHamburger").checked = false}> UNCHECK </Button>

This is giving me an error - Cannot set property 'checked' of null

Make your checkbox controlled - reactjs.org/docs/forms.html#controlled-components. Accessing the dom directly is bad practice in react. — Cameron Little
– Cameron Little, Commented Apr 12, 2020 at 16:10

SMAKSS · Accepted Answer · 2020-04-12 16:17:49Z

6

First, you checkbox isn't controlled by a state value:

Let's start by adding a state:

const [checked, setChecked] = React.useState(true);

Then we give the value to the checkbox:

<input type="checkbox" checked={checked} />

Then let's tell the button to toggle the checked state

<button onClick={() => {setChecked(old => !old)}}> {checked ? 'uncheck' : 'check'} </button>

Working example on this codesandbox

edited Apr 12, 2020 at 16:17

SMAKSS

10.6k3 gold badges26 silver badges38 bronze badges

answered Apr 12, 2020 at 16:11

Incepter

3,0481 gold badge19 silver badges38 bronze badges

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

Comments

Hammad khan · Accepted Answer · 2022-02-16 11:16:44Z

2

function MyApp() {
const [checked, setChecked] = useState(false);
const handleCheck =() => {
 setChecked(!checked)
}
  return (
    <div>
      <input type="checkbox" checked={checked} />
      <Button type="button" onClick={handleCheck}> Click Me </Button>
    </div>
  );
}

export default MyApp;

answered Feb 16, 2022 at 11:16

Hammad khan

562 bronze badges

Comments

Sajeeb Ahamed · Accepted Answer · 2020-04-12 16:16:55Z

0

You can do something like this-

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        checked: true
    }
  }

  handleCheckbox = (e) => {
    e.preventDefault();
    this.setState({checked: false});
  } 

  render() {
    return (
      <div>
        <input type="checkbox" checked={this.state.checked} />
        <button type="button" onClick={this.handleCheckbox}>Uncheck</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

Update

If you want to make the checkbox toggle by clicking the button then you can do this by changing the handleCheckbox function and button text.

  handleCheckbox = (e) => {
    e.preventDefault();
    this.setState({checked: !this.state.checked});
  }

And the button would be

<button type="button" onClick={this.handleCheckbox}>{this.state.checked ? 'Uncheck': 'Check'}</button>

edited Apr 12, 2020 at 16:16

answered Apr 12, 2020 at 16:12

Sajeeb Ahamed

6,4382 gold badges23 silver badges36 bronze badges

1 Comment

Kid Over a year ago

I prefer to use functional components rather than class components

Nikhil · Accepted Answer · 2020-04-12 16:35:05Z

0

This will work:

import React from 'react';
import ReactDOM from 'react-dom';
export default class App extends React.Component {
 constructor(){
  this.state={check:false};

   this.Toggle_checkbox=this.Toggle_checkbox.bind(this);
 }
  Toggle_checkbox=()=>{
this.setState({check:!this.state.check});
  }
 render(){
   return (
    <div>
      <input type="checkbox" checked={this.state.check} />

      <button onClick={this.Toggle_checkbox}> toggle </button>
    </div>
  );
}

 } 
ReactDOM.render(<App/>,document.getElementById('root'));

check:https://stackblitz.com/edit/react-xrt6wa

answered Apr 12, 2020 at 16:35

Nikhil

3,9785 gold badges20 silver badges34 bronze badges

Comments

권희준 · Accepted Answer · 2020-04-12 16:13:53Z

-1

I just ran this error.

Do you want to run it like the code below?

import React, { useState }  from 'react';
import './App.css';
import { Button } from 'react-bootstrap';

function App() {
const [value, setValue] = useState(false);
  return (
    <div>
      <input type="checkbox" value={value} id="checkboxForHamburger" />

      <Button onClick={() => setValue(!value)}> UNCHECK </Button>
    </div>
  );
}

export default App;

If the value is boolean, we can tell whether it is checked or not.

answered Apr 12, 2020 at 16:13

권희준

195 bronze badges

2 Comments

Kid Over a year ago

don't use state value directly.

권희준 Over a year ago

In addition, if you want to distinguish between UNCHECK and CHECK, use the tricuspid operator to write the following together. {value ? CHECK : UNCHECK}

Collectives™ on Stack Overflow

How to check/uncheck a checkbox with onClick event on a button in React.js?

5 Answers 5

Comments

Comments

Update

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Update

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related