如果选中复选框 - 显示输入字段。在 JSFiddle 中工作，而不是在网站上答案

【问题标题】：If checkbox is checked - show input field. Works in JSFiddle, not on website如果选中复选框 - 显示输入字段。在 JSFiddle 中工作，而不是在网站上
【发布时间】：2014-05-03 05:39:24
【问题描述】：

我可能已经盯着这个太久了，并且遗漏了一些明显的东西，但是：为什么这在 JSFiddle 中工作正常，而不是在我上传时？？

测试网站上会显示最后的警报，但无论如何“showthis”也是可见的。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Form Field</title>
<script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="scripts/showfield.js"></script>
</head>

<body>

<input type="checkbox" name="checkbox" id="checkbox" value="checkbox" />
<br />
<input id="showthis" name="showthis" size="50" type="text" value="text here"/>

</body>
</html>

jQuery（我已经下载了一个缩小的 jQuery 1.11.0 ，这是在 JSFiddle 中工作的）

//hide field by default
$('input[name="showthis"]').hide();

//show it when the checkbox is clicked
$('input[name="checkbox"]').on('click', function(){
if ( $(this).prop('checked') ) {
    $('input[name="showthis"]').fadeIn();
} 
else {
    $('input[name="showthis"]').hide();
}
});


// the alert is showing fine 
alert ("hello");

JSFiddle http://jsfiddle.net/DLQY9/

【问题讨论】：

你是否在 dom 就绪处理程序中添加了脚本

标签： jquery checkbox show-hide

【解决方案1】：

其他答案都很好，但其中有一点问题。如果在选中checkbox 时刷新页面，showthis 将因为第一行而被隐藏：

$('input[name="showthis"]').hide();

所以我们在点击监听器之前需要另一个条件如下：

$(function () {
    if($('input[name="checkbox"]').prop('checked')){
        $('input[name="showthis"]').fadeIn();
    } else {
        $('input[name="showthis"]').hide();
    }

    //show it when the checkbox is clicked
    $('input[name="checkbox"]').on('click', function () {
        if ($(this).prop('checked')) {
            $('input[name="showthis"]').fadeIn();
        } else {
            $('input[name="showthis"]').hide();
        }
    });
});

【讨论】：

【解决方案2】：

将您的代码包装在加载事件中。这是较新的首选语法（而不是 $(window) 或 $(document)）：

$(function () {
    $('input[name="showthis"]').hide();

    //show it when the checkbox is clicked
    $('input[name="checkbox"]').on('click', function () {
        if ($(this).prop('checked')) {
            $('input[name="showthis"]').fadeIn();
        } else {
            $('input[name="showthis"]').hide();
        }
    });
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/DLQY9/1/

【讨论】：

谢谢！这是完美的工作。（显然我还需要 4 分才能投票）

【解决方案3】：

试试这个

$(window).load(function(){
$('input[name="showthis"]').hide();

//show it when the checkbox is clicked
$('input[name="checkbox"]').on('click', function(){
if ( $(this).prop('checked') ) {
    $('input[name="showthis"]').fadeIn();
} 
else {
    $('input[name="showthis"]').hide();
}
});
});

【讨论】：