JSFiddle - React, Tailwind, and code Playground

by gamehendgeVA

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>
<script src="https://code.jquery.com/jquery-1.11.3.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="button" class="btn btn-primary btn-xs" data-toggle="button" value="all domains" id="checkAllDomains" />
<br />
<div class="col-md-6">
<div class="checkbox" checked=true><label><input type="checkbox" class="searchDomainCheckbox" id="domainCheckbox1">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 -->
<div class="panel panel-info" id="div1">
<div class="panel-heading"><h3 class="panel-title">Search These Divisions</h3></div>
<div class="panel-body">
THIS DIV SHOULD ONLY APPEAR WHEN "#domainCheckbox1" is checked, either when checked on its own, or checked when the "all domains" button checks it.
</div> <!-- /.panel-body -->
</div> <!-- /.panel -->

JavaScript

$('#div1').hide();
$('#domainCheckbox1').change(function(){
  if($(this).prop("checked")) {
    $('#div1').show();
  } else {
    $('#div1').hide();
   }
});
/////////
$(function() {
    function updateCheckAllButtonDomains() {
        if ($('.searchDomainCheckbox:checked').length == $('.searchDomainCheckbox').length) {
        $('#checkAllDomains').val('uncheck all').data('check', false);
    } else {
        $('#checkAllDomains').val('all domains').data('check', true);
    }       
            $("input.searchDomainCheckbox").trigger("change");
}
$('.searchDomainCheckbox').change(function() {
    updateCheckAllButtonDomains();
});
$('#checkAllDomains').click(function() {
    $('.searchDomainCheckbox').prop('checked', $(this).data('check'));
    updateCheckAllButtonDomains();
});
updateCheckAllButtonDomains();
});