JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<div class="unsubscribe-section global">
  <label class="global-unsubscribe-label">Global registration
  <input type="checkbox" name="unsubs-chkbx" class="unsubs-chkbx">
  </label>
</div>
<hr>

<div class="center-container">
<input type="checkbox" name="unsubs-chkbx-group-1" class="unsubs-chkbx-group">
<input type="checkbox" name="unsubs-chkbx-group-2" class="unsubs-chkbx-group">
</div>

CSS

.active { background:#999; }

JavaScript

$('.unsubs-chkbx-group').change(function() {
    var $container = $(this).parents('.center-container');
    if ($container.find('input[type=checkbox]:checked').length == $container.find('input[type=checkbox]').length) {
        //alert('All checkboxes are checked!');
        $('.unsubscribe-section').addClass('active');
        $('input[type=checkbox].unsubs-chkbx').attr('checked', true);
        
    }
});