This is a short guide on how to get all checked checkbox value in react js. i explained simply about how to get value from multiple checkbox to array in react. you can see how to get multiple checkbox value in react js. I’m going to show you about handling multiple checkboxes in react. Let's see bellow example multiple checkboxes in react example.
Sometime we need to add multiple checkboxes for use chooies like we can give option to choose for fruits that like user and he will select multiple from list. so if you need to add multiple checkboxes in react js then i will show how to can use multiple checkbox in react.
In this example, we will take one categories array with "PHP", "Laravel" etc. and simply using map loop display dynamic multiple checkbox. When user will select any checkbox then we will store that info to "checkedItems" variable. after when you submit form then you can get selected checkbox vaules.
So, let's see bellow preview and example code:
Example Code:
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
categories: [
{id: 1, value: "PHP"},
{id: 2, value: "Laravel"},
{id: 3, value: "Angular"},
{id: 4, value: "React"}
],
checkedItems: new Map()
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
var isChecked = event.target.checked;
var item = event.target.value;
this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
}
handleSubmit(event) {
console.log(this.state);
event.preventDefault();
}
render() {
return (
<div>
<h1>React Multiple Checkbox Example - HDTuto.com</h1>
<form onSubmit={this.handleSubmit}>
{
this.state.categories.map(item => (
<li>
<label>
<input
type="checkbox"
value={item.id}
onChange={this.handleChange}
/> {item.value}
</label>
</li>
))
}
<br/>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Output:
checkedItems: Array[3]
0: Array[2]
0: "1"
1: true
1: Array[2]
0: "3"
1: true
2: Array[2]
0: "4"
1: true
I hope it can help you...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example