JIYIK CN >

We'll cover how to send a value from a checkbox with a checkbox event in React onChange.

While developing web applications or business software, we need to use check boxes to display a list of options from which the user can select.

The user can select one to several options from the list of options and is not restricted to selecting only one checkbox, but the user can even select all the checkboxes.

Each checkbox is independent of all the other checkboxes in the list, so checking one box does not uncheck the other checked checkboxes.

This tutorial will create a list of checkboxes and send them to getValuea function with console.logtheir values. Let's create a new application using the following command.

# react
npx create-react-app my-app

After creating our new React application, we will go to the application directory using this command.

# react
cd my-app

Now, let's run our application to check if all dependencies are installed correctly.

# react
npm start

Let's create a list of checkboxes with different values ​​using the method checkValuethat calls the function.onChange

# react
<div className="App">
      <h1>Select What You Want</h1>
      <div>
        <input id="box1" onChange={checkValue} type="checkbox" value="Box1"/>
        <label htmlFor="#box1">Box 1</label>
      </div>
      <div>
        <input id="box2" onChange={checkValue} type="checkbox" value="Box2"/>
        <label htmlFor="#box2">Box 2</label>
      </div>
      <div>
        <input id="box3" onChange={checkValue} type="checkbox" value="Box3"/>
        <label htmlFor="#box3">Box 3</label>
      </div>
      <div>
        <input id="box4" onChange={checkValue} type="checkbox" value="Box4"/>
        <label htmlFor="#box4">Box 4</label>
      </div>
    </div>

Once we have created a list of checkboxes using the method checkValueof calling function , we will create the function which will accept a parameter containing the value of the checked checkbox and we will get the value of the checkbox checked by the user.onChangecheckValueeconsole.log

# react
function checkValue(e) {
    var value = e.target.value;
    console.log("You selected " + value);
  }

Output:

As shown above, when we check any checkbox, it sets console.logthe value of that checkbox.

There is a problem if we onChangesend the checkbox values ​​using . If we uncheck any one of the checkboxes, the function checkValuewill be called again and we will receive the values ​​of the checkboxes that the user did not check as shown below.

Output:

As shown above, when we uncheck box 1, the value of box 1 is again sent to the function. If we are working with multiple checkboxes and want to save the values ​​of the checkboxes, this would not be the best way to get and save the values.

The best way to get and save the checkbox value is through a form.

However, if we are working with something that works with one checkbox and depends entirely on the state change of that checkbox, then using onChangethe method to perform some functionality might be a good choice.