Skip to content

Instantly share code, notes, and snippets.

Created March 16, 2018 08:58
Show Gist options
  • Save anonymous/f8b4bfbf08287b7ebb2d8b14f77f0f56 to your computer and use it in GitHub Desktop.
Save anonymous/f8b4bfbf08287b7ebb2d8b14f77f0f56 to your computer and use it in GitHub Desktop.
Checkbox on Change Require and Show Inputs (source: https://jsfiddle.net/jdme/s28oz6Ls/8/)
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
font-family: 'Roboto', sans-serif;
}
body {
padding: 80px;
}
<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>
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');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment