Golang React JS Technology Blog

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
onMouseDown and onMouseUp Event handling in ReactJs Create React App React JS update Div content on click How to handle events using expressions inside JSX? How to use arrow function in React stateless components? React Components How to build and use a custom react component from scratch? How to render raw HTML content in React JS? How to set property values using expression? Working with Forms, Inputs and onChange Events in ReactJs