如何检查是否使用JQuery选中了复选框?

时间:2010-02-05 03:32:07

标签: javascript jquery checkbox click

如果用户选中了页面上的复选框,我试图允许点击功能。否则,我想在#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>

2 个答案:

答案 0 :(得分:8)

尝试使用$('#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>

答案 1 :(得分:5)

问题是代码不会连续运行,只有当页面加载时,才会取消选中所有框。您需要在选中或取消选中该框时触发的操作,这会向该按钮添加操作或类:

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