Retrieving value of checkbox in React.js

Question

I want to retrieve the value of my checkbox when it is checked.

I am using this "http://react-component.github.io/checkbox/".

My code looks like this.

<div className="user_box">
    { check.map((values , i)=> {
        return <Checkbox
            name = "checkbox"
            onChange={this.checkvalue.bind(this)}
            value={values.username} 
        />
    })}
</div>

My function:

checkvalue(e){
    // var all_users = [];
    // var value = this.checkbox.value;
    // all_users.push(value);
    // console.log(all_users);

    console.log('checkbox checked:', (e.target.checked));
}

I'm not understanding how to retrieve the value of the checkbox.

Hey, can you make a jsfiddle/code snippet so we can help you ? :) — 0x01
– 0x01, Commented Sep 1, 2016 at 10:08
its difficult to explain on jsfiddle because. i cant explain, what output i want — Manpreet Oberoi
– Manpreet Oberoi, Commented Sep 1, 2016 at 10:45
Using the default e.target.value just getting the value on every time — Felix Orinda
– Felix Orinda, Commented Jan 18, 2022 at 7:06

erdysson · Accepted Answer · 2016-09-01 11:20:08Z

57

you need to pass the "e, Synthetic event parameter to your handler" :

handleChange(e) {
  let isChecked = e.target.checked;
  // do whatever you want with isChecked value
}

render() {
  // ... your code here
  return (
    {/* your other jsx here */}
    <Checkbox otherProps onChange={e => this.handleChange(e)} />
    {/* your other jsx here */}
  );
}

answered Sep 1, 2016 at 11:20

erdysson

1,49013 silver badges18 bronze badges

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

3 Comments

Pramesh Bajracharya Over a year ago

the same thing works when we change the onChange attribute with onChange={this.handleChange}, can you please explain why? How do they differ?

atjua Over a year ago

@PrameshBajracharya Because using {this.handleChange} passes a function, and onChange expects a function. I/O is compatible and hence why it works.

user153923 Over a year ago

How are you doing this? On mine, e.target.checked is undefined

Anayo Samson Oleru · Accepted Answer · 2020-08-07 09:24:36Z

Use the Synthetic event parameter, here is an example:

const element1 = "boy";
const element2 = "girl";

<input
 type="checkbox"
 name={element1}
 value={element1}
 onChange={this.handleChange}
/>
<label for="element" style={{ fontSize: 35 }}>
{element2}
 </label>

<input
 type="checkbox"
 name={element2}
 value={element2}
 onChange={this.handleChange}
/>
<label for="element" style={{ fontSize: 35 }}>
{element2}
 </label>




handleChange = (e) => {
// to find out if it's checked or not; returns true or false
const checked = e.target.checked;

// to get the checked value
const checkedValue = e.target.value;

// to get the checked name
const checkedName = e.target.name;

//then you can do with the value all you want to do with it.
};

Abhishek · Accepted Answer · 2017-08-20 16:09:38Z

2

Try this :

getChckeboxValue(event) {
    const value = event.target.value;
}

In render:

<input onClick={this.getChckeboxValue.bind(this)} type="checkbox" value="Text" />

answered Aug 20, 2017 at 16:09

Abhishek

1,02812 silver badges17 bronze badges

Comments

trojan · Accepted Answer · 2023-02-01 10:41:15Z

1

One liner:

onChange={e => doSomethingWithValue( e.currentTarget.checked )}

answered Feb 1, 2023 at 10:41

trojan

1,54519 silver badges29 bronze badges

Comments

KARTHIKEYAN.A · Accepted Answer · 2022-06-06 15:40:13Z

We can get check box value by declaring onChange={this.likeClicked} defaultChecked={false} on input element properties

  constructor(props){
    super(props)
    this.likeClicked = this.likeClicked.bind(this)
  }

  likeClicked(){
    console.log(event.target.checked, event.target.id);
  }

  render(){
    return (
      <div className='px-3'>
          <div className='item-header item-wrapper cirle'>
            <input 
               type="checkbox" 
               onChange={this.likeClicked}  
               defaultChecked={false}  
               className="checkbox" 
               id={`checkbox_${this.props.product.sku}`} 
            />
            <label htmlFor={`checkbox_${this.props.product.sku}`}> 
               <HeartIcon className="heart-svg"></HeartIcon>
            </label>
          </div>
      </div>
    );
  }

anand · Accepted Answer · 2023-08-26 19:47:00Z

0

If you have to get the checkbox status value with the existing form data like input, select. here is the code

 const onChangeHandler = (e) => {
    const formFieldValue = e.target.type === 'checkbox' ? e.target.checked : e.target.value
    setFormValues({
      [e.target.name]: formFieldValue,
    })
  }

answered Aug 26, 2023 at 19:47

anand

4003 silver badges5 bronze badges

Collectives™ on Stack Overflow

Retrieving value of checkbox in React.js

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related