Question

我的情况很简单。选中checkbox后，会显示textbox。取消选中checkbox会隐藏textbox。

我将值移动到（asp:Textbox）textboxA.text并将（asp:Checkbox）“chkboxA”设置为“Checked in Server”（页面加载）。

然后我的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？

我的代码有什么问题？

Answer 1

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

尝试这样的事情

最初在visible

中设置false textbox

    $(".chk").click(function() {
    $(".txt").toggle(this.checked);
    });

像http://jsfiddle.net/5udtC/1880/

这样的东西

Answer 2

以下是我将如何做到这一点：而不是，

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

Answer 3

尝试添加以下行：

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

之后：

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

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

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

3 个答案: