Question

I have many city input checkboxes. I have given the first checkbox the name All; if the user selects that then only All checkbox gets selected, and not the other city checkboxes.

If the user checks any other city, then the All checkbox should automatically be unchecked. I want to do this with JavaScript or jQuery.

<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_1">Chicago</label>
<input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" /><label for="city_pref_2">Texas</label>

and so on….

Answer 1

Try this

​$(function(){
    var el=$('input:checkbox[name="city_pref[]"]');
    el.on('change', function(e){
        if($(this).is(':checked')) el.not($(this)).prop('checked', false);
    });
});​

DEMO.

Update: (after the clarification of question)

$(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);
        }
    });
});​

DEMO.

Update:(23-07-2012)

I want the functionality, when no checkbox is selected, then All will get selected automatically

Updated Demo.