JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Search These Domains</h3>
</div>
<div class="panel-body">
<input type="checkbox" id="checkAllDomains" />
<label>Check All</label>
<br />
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" class="searchDomainCheckbox">One</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="searchDomainCheckbox">Two</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="searchDomainCheckbox">Three</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" class="searchDomainCheckbox">Four</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="searchDomainCheckbox">Five</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="searchDomainCheckbox">Six</label>
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
JavaScript
$('#checkAllDomains').click(function (event) {
if (this.checked) {
$('.searchDomainCheckbox').each(function () {
this.checked = true;
});
} else {
$('.searchDomainCheckbox').each(function () {
this.checked = false;
});
}
});