javascript - 防止嵌套标签链接跟随，但更改复选框状态

Question

我有一个问题，我有以下标记：

<input type="checkbox" id="foo" />
<label for="foo">
    <a href="http://www.google.com">
        Checkbox text
    </a>
</label>

标签有一个嵌套的锚点，以防用户没有启用 javascript，在这种情况下，他们将在单击标签时跟随链接。

我有以下 javascript/jQuery 来防止链接单击并在复选框状态发生更改时显示警报：

$(function(){
    $("label a").click(function(e){
       e.preventDefault(); 
    });
    $("#foo").change(function(){
       alert("checkbox changed"); 
    });
});

-- 见例子 --

但是，当单击标签时，复选框选中状态不会更改。

我知道我可以破解代码并尝试通过添加代码来设置检查状态来模拟本机浏览器功能，但是我更喜欢使用本机功能而不是模拟它。

如何在不点击链接且不使用 javascript 设置选中状态的情况下让复选框更改状态？

Answer 1

这里有点困惑and without setting the checked state using javascript?......但我认为你在谈论trigger()......

$("label a").click(function(e){
    var $foo = $("#foo");
    $foo.attr("checked", !$foo.attr("checked"));
    $foo.trigger('change');
   return false;
});

小提琴