在JQuery中选中的复选框不起作用

本文关键字：复选框 不起作用 JQuery | 更新日期: 2023-09-27 18:13:30

我有一个简单的情况。当检查checkbox时，则显示textbox。不勾选checkbox将隐藏textbox。

我将值移动到(asp:Textbox) textboxA。文本并设置(asp:Checkbox)"chkboxA"到服务器端检查(页面加载)。

则执行jquery代码document.ready。

C#代码

 protected override void OnLoad()
    {   textboxA.Text = "Hello World";
        chkboxA.Checked = !string.IsNullOrEmpty(textboxA.Text);
    }
JQUERY CODE:
$('input[id$=chkboxA]').click(function () {
    var checked_status = this.checked;
    if (checked_status == true) {
        $('input[id$=textboxA]').show();
    }
    else {
        $('input[id$=textboxA]').hide();
    }
});
$('input[id$=chkboxA]').click();  //this statment triggers the checkbox checked

问题:当页面第一次显示时，显示的是"textboxA"，但checkboxA是unchecked。然后，当我点击checkboxA时，checkbox被检查，TextboxA留在屏幕上。然后，当我再次点击CheckboxA取消选中时，texboxA就不显示了。

，所以问题是在第一次加载(第一次显示在屏幕上)。

为什么checkboxA不检查时，页面第一次显示，而TextboxA显示?

我的代码有什么问题?

在JQuery中选中的复选框不起作用

我认为最简单的方法是使用toggle()

试试这样

在textbox

中初始设置visible false
    $(".chk").click(function() {
    $(".txt").toggle(this.checked);
    });

比如http://jsfiddle.net/5udtC/1880/

我是这样做的:相反的,

chkboxA.Checked = !string.IsNullOrEmpty(textboxA.Text);

你可以有一个脚本，在页面加载完成后执行(在你的标记中)

<script type="text/javascript">
    $(document).ready(function() {
        if($('#textboxA').attr('value') != '') {
            $('#chkboxA').attr("checked", "checked");
        } else {
            $('#chkboxA').attr("checked", false);
        }
    });
</script>

然后，当评估复选框是否被选中时，您可以使用:

$('#chkboxA').click(function () {
    if (this.attr('checked')) {
        $('#textboxA').show();
    }
    else {
        $('#textboxA').hide();
    }
});

尝试添加这一行:

if ($('input[id$=chkboxA]').is(':checked')) {
    $('input[id$=textboxA]').show();
}
else {
    $('input[id$=textboxA]').hide();
}
:后

$('input[id$=chkboxA]').click();

如果你删除:$('input[id$=chkboxA]').click();，你会看到文本框将被隐藏

相关文章：