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 get a clicked HTML element in React?
How to perform computation inside expression using ternary operator?
Glyphicon Rating Star component
Component displays Height and Width on window resize
How to use function inside JSX expression?
How to set property values using expression?
How to create Functional Component?
What is state in React?
How to create simple React Router to navigate multiple pages?
3 Different Examples - How State Works in React?