javascript 使用 jquery 的点击功能...奇怪的行为

Question

我是 javascript 和 jquery 的新手，我使用过这个网站（和其他网站）来尝试弄清楚为什么下面 fiddle 中的点击功能不正确工作。

运行代码时，即使未选中复选框，您也会看到一个复选框和文本区域。正确的行为应该是；仅在选中复选框时显示文本区域。我确定我在这里遗漏了一些简单的东西。

非常感谢任何帮助。

HTML:

<input type="checkbox" id="OtherAdv" name="OtherAdv" value="1" data-mini="true" /><label for = "OtherAdv">Other?</label>

<textarea rows="4" cols="50" class="formfont_small" id="OtherAdvDiag" name="OtherAdvDiag" data-mini="" placeholder="Please list others"></textarea>

Javascript：

$(document).ready(function () {
     $('#OtherAdv').click(function () {
         var $foo = $(this);
         if ($foo.is(':checked')) {
             $('#OtherAdvDiag').show();
         } else {
             $('#OtherAdvDiag').hide();
         }
     });
 });

Answer 1

它似乎工作正常，textarea 默认情况下没有隐藏。可以用CSS隐藏，例如：

#OtherAdvDiag {
    display: none;
}

或者，如果您想保留 JavaScript 的功能，只需在页面加载时将其隐藏一次：

$('#OtherAdvDiag').hide();

Answer 2

问题是您没有考虑复选框的起始状态 - 您只对未来的状态变化采取行动。

这可以通过多种方式解决。如果您知道复选框将始终处于未选中状态，您可以简单地隐藏 CSS 中的文本区域。或者，为了更有活力，您可以使用 trigger() 在加载时触发事件，在这种情况下，您现有的回调将解决问题，就像有人实际切换了复选框一样。

更新代码：

$(function () {
    $('#OtherAdv').on('change', function () {
        $('#OtherAdvDiag')[$(this).is(':checked') ? 'show' : 'hide']();
    }).trigger('change');
});

我还在几个方面清理并优化了您的代码。特别是，使用带有复选框的更改事件而不是单击事件，因为前者还考虑了通过非鼠标方式完成的切换，例如键盘.

Answer 3

Here你去

您需要在页面加载时隐藏文本区域，方法是包含

style="display:none"

javascript 使用 jquery 的点击功能...奇怪的行为

javascript click function using jquery...strange behavior

jquery

function

click