CODEWITHSUNDEEP
reactjs
John
John

Reputation: 2624

Get the value of checkbox using ref in React

is there any way to get value of checkbox using ref in React. Normal way return always value "on" to me.

var MyForm = React.createClass({
    save: function(){
        console.log(this.refs.check_me.value);
    },

    render: function(){
        return <div><h1>MyForm</h1>
            <div className="checkbox">
                <label>
                    <input type="checkbox" ref="check_me" /> Check me out
                </label>
            </div>
            <button className="btn btn-default" onClick={this.save}>Submit</button>
        </div>
    }
});

Upvotes: 33

Views: 74263

Answers (4)

Muhammed Moussa
Muhammed Moussa

Reputation: 5195

I'm not sure why you want it using ref specifically, but it can be done nativily:

import React from 'react';

function CheckBox() {
  const [isSave, setIsSave] = React.useState(false);
  const handler = (value) => {
    console.log(value);
    setIsSave(value);
  };

  return (
    <div>
      <input type="checkbox" onChange={(ev) => handler(ev.target.checked)} />
      <label> Save me..</label>
    </div>
  );
}

export default CheckBox;

Upvotes: 0

Roman
Roman

Reputation: 21775

There is a classic way to catch the event and corresponding values with the help of:

event.target.checked, event.target.name

You can see an example:

class MyForm extends React.Component {
    onChangeFavorite(event){
        console.log(event.target.checked, event.target.name);
    };
    render(){
        return (<div><h1>MyForm</h1>
            <div className="checkbox">
                <label>
                   <input type="checkbox" name="myCheckBox1" 
                     onChange={this.onChangeFavorite} 
                     defaultChecked={false} /> 
                   Check me out
                </label>
            </div>
            <button className="btn btn-default" onClick={this.save}>Submit</button>
        </div>)
    };
};

Upvotes: 16

Chris
Chris

Reputation: 59511

You can make the checkbox a controlled element by listening to onChange and giving it a state value. Try the following:

var MyForm = React.createClass({
  save: function(){
    console.log(this.refs.check_me.value);
  },

  toggleCheckboxValue: () => {
    this.setState({checkBoxValue: !this.state.checkboxValue});
  },

  render: function(){
    return <div><h1>MyForm</h1>
        <div className="checkbox">
            <label>
                <input type="checkbox" ref="check_me" value={this.state.checkboxValue} onChange={this.toggleCheckboxValue} /> Check me out
            </label>
        </div>
        <button className="btn btn-default" onClick={this.save}>Submit</button>
    </div>
  }
});

whenever the checkbox is clicked it will run the toggleCheckboxValue function, which will toggle the value of this.state.checkboxValue.

Just don't forget to initialize the this.state.checkboxValue function in your code.

Note: As ivarni pointed out, you may want to control the checked value specifically for checkboxes rather than value. Though both solutions will work.

Upvotes: 11

Damien Leroux
Damien Leroux

Reputation: 11693

For checkbox, use "checked" instead of "value":

var MyForm = React.createClass({
  save: function () {
    console.log(this.refs.check_me.checked);
  },

  render: function () {
    return <div><h1>MyForm</h1>
      <div className="checkbox">
        <label>
          <input type="checkbox" ref="check_me" /> Check me out
        </label>
      </div>
      <button className="btn btn-default" onClick={this.save}>Submit</button>
    </div>
  }
});

As a result:

enter image description here

Upvotes: 55

Related Questions