JSFiddle - React, Tailwind, and code Playground

HTML

<div id="input_6_48"><input type="checkbox"> Ja, gerelateerde selecteren.</div>

<ul><li style="list-style-type: none !important;" class="branche"><strong>overige particuliere dienstverlening</strong><ul class="subbranche" style="margin-left:0px;"><li style="list-style-type: none !important;"><label><input type="checkbox" name="franchise_water-babies" data-id="105924" value="Water Babies">Water Babies</label></li></ul></li><li style="list-style-type: none !important;" class="branche"><strong>payroll</strong><ul class="subbranche" style="margin-left:0px;"><li style="list-style-type: none !important;"><label><input type="checkbox" name="franchise_nedflex-uitzendbureau" data-id="70771" value="Nedflex Uitzendbureau">Nedflex Uitzendbureau</label></li><li style="list-style-type: none !important;"><label><input type="checkbox" name="franchise_repay-payroll" data-id="70913" value="Repay Payroll">Repay Payroll</label></li></ul></li><li style="list-style-type: none !important;" class="branche"><strong>persoonlijke verzorging</strong><ul class="subbranche" style="margin-left:0px;"><li style="list-style-type: none !important;"><label><input type="checkbox" name="franchise_amero-skin" data-id="70015" value="Amero Skin">Amero Skin</label></li><li style="list-style-type: none !important;"><label><input type="checkbox" name="franchise_soleij" data-id="70981" value="Soleij">Soleij</label></li></ul></li><li style="list-style-type: none !important;" class="branche"><strong>reclame &amp; vormgeving</strong><ul class="subbranche" style="margin-left:0px;"><li style="list-style-type: none !important;"><label><input type="checkbox" name="franchise_multicopy" data-id="70759" value="MultiCopy">MultiCopy</label></li></ul></li><li style="list-style-type: none !important;" class="branche"><strong>reclame en promotie</strong><ul class="subbranche" style="margin-left:0px;"><li style="list-style-type: none !important;"><label><input type="checkbox" name="franchise_snak-appeal" data-id="70975"...

JavaScript

var boxes = jQuery('input:checked');
	   
jQuery(boxes).each(function(){
	jQuery(this).closest('label').css({ backgroundColor:'yellow', fontWeight: 'bold' });
});
		
jQuery('input[type=checkbox]').change(function() {	
    if(jQuery(this).is(':checked')){
		jQuery(this).closest('label').css({ backgroundColor:'yellow', fontWeight: 'bold' });
	} else {
		jQuery(this).closest('label').css({ backgroundColor:'white', fontWeight: 'normal' });
	}
});
		
// random check
jQuery('input[type=checkbox]').change(function(){
			
    if(jQuery(this).is(':checked')){
		jQuery(this).closest('.subbranche').addClass('related');
				
	} else {
		jQuery(this).closest('.subbranche').removeClass('related');
	}
			
});
		
jQuery('input[type=checkbox]').each(function(){
			
	if(jQuery(this).is(':checked')){
		jQuery(this).closest('.subbranche').addClass('related');
	} 
			
});
			
jQuery('#input_6_48 input[type=checkbox]').on('click',function(){
			
	jQuery('.active_related').click();
			
	if (jQuery(this).prop('checked')) {
				
		var data = [];
		var data_open = [];
		jQuery('.related input[type=checkbox]').each(function() {
			if (jQuery(this).prop('checked')) {
				data.push(jQuery(this));
			} else {
				data_open.push(jQuery(this));
			}
	    });
				
		console.log(data.length);
		if (data.length < 4) {
			//console.log(data.length);
			for (i=data.length;i<4;i++) {
				var index = Math.ceil(Math.random() * data_open.length)-1;
				var obj = data_open[index];
				data_open.splice(index,1);
				data.push(obj);
				obj.click();
				obj.addClass('active_related');
			}
		}
	} 
			
});