контролировать флажок через IMG, используя jquery

Question

Я хочу контролировать проверенное состояние флажка, когда пользователь нажимает на изображение с классом ".latinAmerica" ​​на странице.Каждый щелчок должен проверять / снимать флажок каждый раз.

Я испробовал множество различных методов, но не могу найти ничего подходящего для флажков.

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);
    }   
});

или

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

Я использовал этот метод для работы с переключателями:

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

Но не повезло с флажками.

Что я делаю не так:(

Спасибо.

Answer 1

Условие if неверно, поэтому оно не должно ничего делать, т. Е. Флажок установлен, если он уже отмечен, и не отмечен, если он уже не отмечен.

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

Answer 2

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

Скрипка: http://jsfiddle.net/JFDxj/