JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<input type="checkbox" name="city_pref[]" id="city_all" value="0" checked />
<label for="city_all">All</label>
<input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" />
<label for="city_pref_3">Chicago</label>
<input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" />
<label for="city_pref_3">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
            {
                if($(this).is(':checked'))
                    el.not($(this)).prop('checked', false);
            }
        });
    });