Javascript 使用jquery通过IMG控制复选框

我想控制当用户点击页面中带有“.latinAmerica”类的图像时复选框的选中状态。每次单击都应选中/取消选中它

我尝试了很多不同的方法，但是我找不到任何适合复选框的方法

例如：

或

我确实用单选按钮实现了这种方法：

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

但是没有复选框

我做错了什么

谢谢

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

---

Fiddle:

如果条件错误，则它不能执行任何操作，即已选中复选框时选中复选框，已取消选中时取消选中复选框

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

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

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