如何使用JQuery检查复选框是否被选中？

Question

我正在尝试在用户勾选页面上的复选框后允许点击功能。否则，我想要给 #additional_foreign 按钮添加一个类。

我认为我已经接近成功了，但它似乎并没有起作用。 以下是我的代码：

if($('#foreign_checkbox').attr('checked')) { 
    $('#additional_foreign').click(function() {
        alert('This click function works');
    });
} else {
    $('#additional_foreign').addClass('btn_disable');   
}

当我勾选复选框时，它不允许单击功能，当我取消勾选复选框时，它也没有像应该的那样添加类。

我做错了什么？

编辑：这是我的HTML以供澄清。

<input id="foreign_checkbox" type="checkbox" />
<span id="additional_foreign">Click Me</span>

- zeckdude

---

除了您的主要问题之外，您的代码所做的是在复选框被选中时将单击事件处理程序附加到按钮，如果未选中，则将其样式设置为“禁用”，但实际上并未禁用。取消选中复选框不会删除按钮的onclick处理程序。 - o.k.w

哦，我明白了。在条件语句的else区域中，我该如何使按钮无法被点击？ - zeckdude

查看JQuery的unbind()。不删除操作可能是可以的，因为添加btn_disable类可能会禁用按钮。另一方面，在when-it's-checked情况下，您需要删除该类。 - user24359

Answer 1

尝试使用$('#foreign_checkbox').is(":checked")，其余代码看起来没问题。

如果这是我的代码，我会像这样做使它工作：

<input id="foreign_checkbox" type="checkbox" />
<span style='display:none' id="additional_foreign">Click Me</span>

<script type="text/javascript">
    $(document).ready(function() {

        $("#foreign_checkbox").click(function() {
            if($('#foreign_checkbox').is(':checked')) { 
                $('#additional_foreign').show();
            } else {
                $('#additional_foreign').hide();
            }
        });

        $('#additional_foreign').click(function() {
            alert('This click function works');
        });
    });
</script>

- Marek Karbarz

---

当我这样做时，条件语句的else部分起作用，但是当我勾选复选框时，点击函数仍然不起作用。 - zeckdude

你还将内部的doSomething()函数添加到了#additional_foreign的onclick处理程序中，我怀疑这不是你想要做的。 - Brock Batsell

Brock - 不，我想在复选框被点击后使 #additional_foreign 按钮可点击。如果用户随后点击该按钮，则应运行 doSomething() 函数。 - zeckdude

非常好！我想我过于深思熟虑了。你的解决方案似乎更简单易用。谢谢！ - zeckdude

请不要使用任何特殊的jQuery方法来获取或设置复选框的选中状态。DOM有一种非常好的方法来完成这个任务，它非常简单明了，并且自上世纪90年代末以来一直受到所有浏览器的支持，即复选框元素具有一个布尔checked属性。使用jQuery的is或attr会减慢代码执行速度，使代码不够清晰，并增加出错的可能性。 - Tim Down

Answer 2

问题在于代码不会持续运行，只有当页面加载时，所有复选框都未被选中才会运行。您需要一个动作，在复选框被选中或取消选中时触发，该动作会向按钮添加一个操作或类：

$('#foreign_checkbox').change(function(){
    if (this.checked){
        $('#additional_foreign').click(function() {
           doSomething();
        });
    } else {
        $('#additional_foreign').addClass('btn_disable');
    }   
});

- user24359

---

哇，直到我找到你的时候，我一直在苦苦挣扎。问题是代码不能持续运行，而.change对我来说更加有效。 - Eugene van der Merwe