JSFiddle - React, Tailwind, and code Playground

by heera

HTML

<label for="city_all"><input type="checkbox" name="city_pref[]" id="city_all" value="0" checked />All</label>
<label for="city_pref_1"><input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" />Chicago</label>
<label for="city_pref_2"><input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" />Texas</label>

JavaScript

$(function(){
        var el=$('input:checkbox[name="city_pref[]"]');
        el.on('change', function(e){
            if($(this).attr('id')!='city_all')
            {
                if($(this).is(':checked')) 
                    $('#city_all').prop('checked', false);
                else
                {
                    var l=$(':checkbox[name="city_pref[]"]')
                        .filter(':checked')
                        .not('#city_all').length;
                    if(l==0) 
                      $('#city_all').prop('checked', true);
                }
            }
            else
            {
                if($(this).is(':checked'))
                    el.not($(this)).prop('checked', false);
            }
        });
    });