JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<form role="form" id="form1">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" id="terms" name="terms"> I am agree with terms
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

JavaScript

$('#form1').submit(function(event) {
  event.preventDefault();
  if($('#terms').is(':checked') )
  {

  $.ajax({
   type: 'POST',
   url: 'example.php',
   data: $(this).serialize(),
   dataType: 'json',   
   success: function (data) {
        $('#info1').html('');
        $.each( data, function( key, value ) {

          $('#info1').append('<p>'+value+'</p>');
        });    

   }
  });
  }
else{
alert("Check terms and condition");
}
 });