<html><head> <meta charset="UTF-8" /></head><body> <div id="app"></div> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> const { useState } = React; function App() { const [selectedItems, setSelectedItems] = useState([]); const handleCheckboxChange = (event) => { const { value, checked } = event.target; if (checked) { setSelectedItems((prevSelectedItems) => [...prevSelectedItems, value]); } else { setSelectedItems((prevSelectedItems) => prevSelectedItems.filter((item) => item !== value) ); } }; return ( <div className="container"> <h3>React Js Get Checkbox selected item | multi select checkbox</h3> <label> <input type="checkbox" value="America" checked={selectedItems.includes('America')} onChange={handleCheckboxChange} /> America </label> <label> <input type="checkbox" value="England" checked={selectedItems.includes('England')} onChange={handleCheckboxChange} /> England </label> <label> <input type="checkbox" value="Brazil" checked={selectedItems.includes('Brazil')} onChange={handleCheckboxChange} /> Brazil </label> <label> <input type="checkbox" value="China" checked={selectedItems.includes('China')} onChange={handleCheckboxChange} /> China </label> <label> <input type="checkbox" value="India" checked={selectedItems.includes('India')} onChange={handleCheckboxChange} /> India </label> <label> <input type="checkbox" value="France" checked={selectedItems.includes('France')} onChange={handleCheckboxChange} /> France </label> <label> <input type="checkbox" value="Germany" checked={selectedItems.includes('Germany')} onChange={handleCheckboxChange} /> Germany </label> <br /> <p>Selected items: {selectedItems.join(', ')}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> * { box-sizing: border-box; } .container { margin: 0 auto; width: 600px; text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); padding: 20px; } h3 { text-align: center; } label { display: flex; align-items: center; margin-bottom: 10px; cursor: pointer; } input[type="checkbox"] { margin-right: 10px; } input[type="checkbox"]:checked+span { font-weight: bold; } div.selected-item { margin-top: 10px; } </style></body></html>