Checkbox on Change Require and Show Inputs

on change checkbox show inputs and make it required

by Joseph Dicdican

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<form id="my-form" action="#">
  <div class="form-group">
    <label>Email address:</label>
    <input type="email" class="form-control" required>
  </div>
  <div class="form-group">
    <label>Password:</label>
    <input type="password" class="form-control">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" id="subscribe"> Subscribe </label>
  </div>
  <div id="subscription-inputs">
    <div class="form-group">
      <label>City</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label>State</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
  font-family: 'Roboto', sans-serif;
}
body {
  padding: 80px;
}

JavaScript

var form = $('#my-form'),
  checkbox = $('#subscribe'),
  subscription_inputs = $('#subscription-inputs');

subscription_inputs.hide();

checkbox.on('click', function() {
  if ($(this).is(':checked')) {
    subscription_inputs.show();
    subscription_inputs.find('input').attr('required', true);
  } else {
    subscription_inputs.hide();
    subscription_inputs.find('input').attr('required', false);
  }
});

form.submit(function() {
  alert('you submitted thanks');
});