Check checkbox is Checked or Unchecked
Create a new file and give it name index.html. Add the code given below to it:
Example
This example has a limited use as it is. Use it as a reference for your own applications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="react-container"></div>
</body>
<script type="text/babel">
var Checkbox = React.createClass({
getInitialState: function() {
return {checked: true}
},
handleCheck: function() {
this.setState({checked: !this.state.checked});
},
render: function() {
var msg;
if (this.state.checked) {
msg = "Checked";
} else {
msg = "Un-checked";
}
return (
<div>
<input type="checkbox" onChange={this.handleCheck} defaultChecked={this.state.checked}/>
<p>Checkbox: {msg}</p>
</div>
);
}
});
React.render(<Checkbox />,
document.getElementById('react-container')
);
</script>
</html>
Most Helpful This Week
How to use onChange and onClick event in React JS?
How to create simple React Router to navigate multiple pages?
Component displays Height and Width on window resize
onMouseDown and onMouseUp Event handling in ReactJs
How to use function inside JSX expression?
Example of React JS with Material UI components