Question

我需要在选中复选框时隐藏一些内容，并在未选中复选框时显示它们。我使用类选择器来浏览文档并隐藏这些元素。

代码似乎有效，唯一的问题是每次加载页面时，当我检查它时，更改事件不会触发。我必须取消检查，然后再次检查，然后事件发生。请帮我看看我做错了什么。

        <script type="text/javascript">
            $(document).ready(function () {
                $('#chkFiles').change(function () {
                    if (this.checked)
                        $(".hideWhenChecked").hide();
                    else
                        $(".hideWhenChecked").show();
                });
            });
    </script>

要隐藏的元素是这样的：

    <TR>
        <TD style="WIDTH: 144px" width="144"><span class="hideWhenChecked">Select:</span></TD>
        <TD><span class="hideWhenChecked"><asp:dropdownlist id="ddl" runat="server" AutoPostBack="True"></asp:dropdownlist></span></TD>
</TR>

我们的jquery库是1.4.1，它已经过时了，但是我不能决定更新它。此版本中没有某些功能。

Answer 1

您需要在页面加载中检查已更改的内部执行逻辑，以便隐藏.hideWhenChecked，具体取决于chkFiles来自服务器的方式。

<script type="text/javascript">
    $(document).ready(function () {
        onChkChanged(); // <-- execute on page load

        $('#chkFiles').change(function () {
            onChkChanged(); // <-- execute on checked changed
        });
    });

    function onChkChanged() {
        var show = $('#chkFiles').is(':not(:checked)');
        $(".hideWhenChecked").toggle(show);
    }
</script>

jquery复选框更改事件在首次单击时不会触发

1 个答案: