JSFiddle - React, Tailwind, and code Playground

by Gabriel Vazquez

HTML

<script src="http://montrezorro.github.io/bootstrap-checkbox/javascripts/bootstrap-checkbox/js/bootstrap-checkbox.js"></script>
<link rel="stylesheet" href="http://montrezorro.github.io/bootstrap-checkbox/javascripts/bootstrap-checkbox/css/bootstrap-checkbox.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://montrezorro.github.io/bootstrap-checkbox/javascripts/bootstrap-checkbox/img/icons.png"></script>
<form>
	<div class="form-group">
		<div class="col-sm-12 divider">
			<br>
			<label>
                <input type="checkbox" class="checkbox selectAll" value=""/>
				Select All
            </label>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-12 ">
			<label>
				<input type="checkbox" class="" value="">
				CHS Informed Consent Form</label>
		</div>
		<hr/>
		<div class="col-sm-12">
			<label>
				<input type="checkbox" class="checkbox" value="">
				Order Sets</label>
		</div>
		<div class="col-sm-12">
			<label>
				<input type="checkbox" class="checkbox" value="">
				Carboplatin Teaching Sheet</label>
		</div>
		<div class="col-sm-12">
			<label>
				<input type="checkbox" class="checkbox" value="">
				Bevacizumab Teaching Sheet</label>
		</div>
		<div class="col-sm-12">
			<label>
				<input type="checkbox" class="checkbox" value="">
				CHS Specialty Pharmacy Sheet</label>
		</div>
		<div class="col-sm-12">
			<label>
				<input type="checkbox" class="checkbox" value="">
				Calendar</label>
		</div>
		<div class="col-sm-12">
			<label>
				<input type="checkbox" class="checkbox" value="">
				Healthcare Provider Contact Form</label>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-12">
			<button type="submit" class="btn btn-default submit">
				Generate Super Pack
			</button>
		</div>
	</div>

</form>

JavaScript

$('input.checkbox').checkbox({
    buttonStyle: 'btn-link',
    buttonStyleChecked: 'btn-inverse',
    uncheckedClass: 'icon-check-empty',
    checkedClass: 'btn-inverse'
});
$("input.selectAll").click(function (ev) {
    console.log('checkall',$('input[type=checkbox]:not(.selectAll)'));
    $('input[type=checkbox]:not(.selectAll)').prop('checked', this.checked);
});