bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>





<div class = 'divResult'>


 <button  class = 'resultSchema' data-toggle='collapse' data-target='#HR_objType'  aria-expanded='false' aria-controls='HR_objType'>HR</button>
 <div class=' collapse in' id = 'HR_objType'>
	 <div class = 'resultObjects'> 
		<a data-toggle= 'collapse' href='#HR_objects_new' aria-expanded='false' aria-controls='HR_objects_new'> New Objects: </a>
	 </div>
	 
	 <div class = 'resultObjectsNew collapse in' id = 'HR_objects_new'>
		 <div>
		 
		 <a data-toggle= 'collapse' href='#HR_PACKAGE_resultNamesNew' aria-expanded='false' aria-controls='HR_PACKAGE_resultNamesNew'>Package </a> 
		 <span class="selectAllNewObj">[select all]</span>
		 </div>
		 <div class = 'resultNamesNew collapse in' id = 'HR_PACKAGE_resultNamesNew'>
			 <label style = 'font-size:12px;' ><input type='checkbox'  name='PACKAGE1' value = 'PACKAGE1'/> PACKAGE1 </label>
			 <label style = 'font-size:12px;' ><input type='checkbox'  name='PACKAGE2' value = 'PACKAGE2'/> PACKAGE2 </label>
		 </div>
		 
		 <div>
		 <a data-toggle= 'collapse' href='#HR_TABLE_resultNamesNew' aria-expanded='false' aria-controls='HR_TABLE_resultNamesNew'> Table </a> <span...

CSS

.resultSchema {
    background-color: #6fb0ff;
  color: white;
  cursor: pointer;
  padding: 5px;
  width: 80%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  opacity: .81;

}

 .resultObjects a{
    padding-top: 2px;
    color : green;
    font-size: 13px;
    font-weight: bold;
}

  .resultObjectsNew {
    padding-left: 25px;
    text-transform:capitalize;
    font-size: 13px; 
}

  .resultNamesNew {
    padding-left: 30px;

}

.selectAllNewObj {
	color: gray;
    font-style: italic;
    font-size: 11px;
    padding-left: 5px;
	text-transform: lowercase;
	cursor: pointer;
}

.divResult {
    float:left;
    width:50%;
}

JavaScript

$('.resultObjectsNew').on('click', 'span.selectAllNewObj', function(){
        var checked = $(this).parent().next().find('input').prop('checked');
        $(this).parent().next().find('input').prop('checked', !checked);
		
    });
    

let checkboxes = $("input[type='checkbox']");
let enabledSettings = [];

// Attach a change event handler to the checkboxes.
checkboxes.change(function() {
  enabledSettings = checkboxes
    .filter(":checked") // Filter out unchecked boxes.
    .map(function() { // Extract values using jQuery map.
      return this.value;
    }) 
    .get() // Get array.
    
  console.log(enabledSettings);
});