JSFiddle - React, Tailwind, and code Playground

HTML

<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]">
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]">
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]">
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]">

JavaScript

$('#campaign_range_ids_4').click(function() {
   if(this.checked) {
       $(':checkbox').each(function() {
           this.checked = true;                        
       });
   } else {
      $(':checkbox').each(function() {
           this.checked = false;                        
       });
   } 
});