Question

我是javascript和jquery的新手，并且已经使用这个网站（以及其他网站）试图弄清楚为什么下面的小提琴中的点击功能无法正常工作。

运行代码时，即使没有选中复选框，您也会看到一个复选框和textarea。应该是正确的行为;仅在选中复选框时显示textarea。我确定我在这里错过了一些简单的东西。

非常感谢任何帮助。

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

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

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

更新的代码：

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

我还在几个方面对您的代码进行了清理和优化。特别是，使用改变，而不是点击具有复选框的事件，因为前者考虑了通过非鼠标手段完成的切换，例如，键盘。

Answer 2

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

#OtherAdvDiag {
    display: none;
}

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

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

Answer 3

Here你去了

您需要在加载页面时隐藏textarea，包括

style="display:none"

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

3 个答案: