How to return true or false using the input checkbox in react js?

Question

My input checkbox always returns true, when i mark it passsa true correctly, but when i unmark tb i get true. I would like the checkbox to return true when checked and false when unchecked, this way I would apply my logic in the handlesubmit function.


    handleChange = e => {
        const { name, value } = e.target;
        console.log(name, value);
        switch (name) {

          case 'period': this.json.schedule = 'period'; break;

    }


 <input
       type="checkbox"
       name="period"
       defaultValue
       onChange={this.handleChange}
 />

Your onChange callback function isnt returning anything, where are you checking for true and false? — Ryan Wilson
– Ryan Wilson, Commented Apr 16, 2019 at 20:05
I think I understood the operation of the wrong component, believe that the simple fact of unmarking would return false, instead of true as I'm always receiving. — Janio Carvalho
– Janio Carvalho, Commented Apr 16, 2019 at 20:07

Neil · Accepted Answer · 2019-04-17 17:43:43Z

10

Checkout the value of e.target.checked.

In your case, change this line: const { name, value } = e.target to include checked.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true
    }
  }
  
  handleChange = (e) => {
    const { checked } = e.target
    this.setState({
      checked: checked
    })
  }
  
  render() {
    return (
      <div>
        <input type="checkbox"
               onChange={e => this.handleChange(e)}
               defaultChecked={this.state.checked}/>
        {this.state.checked.toString()}
      </div>
    )
  }
}

ReactDOM.render((<App/>), document.getElementById('testing'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="testing"></div>

edited Apr 17, 2019 at 17:43

answered Apr 17, 2019 at 17:38

Neil

2,0784 gold badges23 silver badges50 bronze badges

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

Comments

Adem · Accepted Answer · 2022-06-05 17:02:51Z

2

You can use useState.

import React, { useState } from 'react';

const App = () => {
    const [Check, setCheck] = useState(false);
    return (
        <div>
            <h1>{Check ? 'Checked' : 'Not checked'}</h1>
            <input type="checkbox" onChange={(e) => setCheck(e.target.checked) }/>
        </div>
    );
};

export default App;

answered Jun 5, 2022 at 17:02

Adem

611 silver badge5 bronze badges

Comments

Larson Carter · Accepted Answer · 2019-04-16 19:58:14Z

0

You first need to define what check is considered? If it is check it is true and when it is not checked it is false. Here is some code to get you started.

{   this.state.data.map(function(item, index) { return (
    <input type="checkbox" checked={item.value} onChange={this.handleChange.bind(this, index)}/>
  );
      }.bind(this))
}

answered Apr 16, 2019 at 19:58

Larson Carter

1632 silver badges12 bronze badges

1 Comment

Janio Carvalho Over a year ago

I added the function on change

NFDev · Accepted Answer · 2019-04-17 17:11:34Z

0

You aren't checking wether the box is checked or not, try:

handleChange = e => {
    if (document.getElementByClassName("period").checked) {
        // box is checked
    } else {
        // box is unchecked
    }
}

edited Apr 17, 2019 at 17:11

answered Apr 16, 2019 at 19:58

NFDev

688 bronze badges

4 Comments

Janio Carvalho Over a year ago

I added the function on change

NFDev Over a year ago

Thanks for that, I made an edit as well. I would keep things simple, readability is always important.

Janio Carvalho Over a year ago

Where would I add this instruction?

Neil Over a year ago

you can use e.target.checked instead

Collectives™ on Stack Overflow

How to return true or false using the input checkbox in react js?

4 Answers 4

Comments

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related