Question

I want to control the checked state of a checkbox when a user clicks on an image with the class of “.latinAmerica” within the page. Each click should check/uncheck it each time.

I’ve tried a ton of different methods but I can’t find anything suitable for checkboxes.

EG:

$('.latinAmerica').click(function () {  
    if($('input:checkbox[name=theName]:nth(0)').is(':checked')) {
        $('input:checkbox[name=theName]:nth(0)').attr('checked',true);
    } else {
        $('input:checkbox[name=theName]:nth(0)').attr('checked',false);
    }   
});

or

$('.latinAmerica').click(function () {  
    $("input:checkbox[name=theName]:nth(0)").prop("checked", true);
});

I did get this method working with radio buttons:

$('.latinAmerica').click(function () {  
    $('input:checkbox[name=theName]:nth(0)').attr('checked',true);
});

But no luck with checkboxes.

What am I doing wrong 🙁

Thanks.

Answer 1

$(function() {
    $(".latinamerica").click(function() {
        var cb = $("input[name='theName']");
        if(cb.is(":checked")) {
            cb.prop("checked", "");
        } else {
            cb.prop("checked", "checked");
        }
    });
});

Fiddle: http://jsfiddle.net/JFDxj/