JSFiddle - React, Tailwind, and code Playground

by Gagan Gami

HTML

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

JavaScript

$('#campaign_range_ids_4').click(function () {
   
    if ($(this).is(':checked')) {
        $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true);

    } else {
        $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false);
    }

});

$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').click(function () {
   
    if ($(this).is(':checked')) {
        } else {
            $('#campaign_range_ids_4').prop('checked', false);
    }

});