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

Answer 1

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

Answer 2

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>

Answer 3

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

Answer 4

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.