Javascript 标签使复选框不起作用

我正在创建一个带有单个复选框的页面。单击此复选框时，会出现一个文件输入小部件，以便用户可以上载图像。问题是，当小部件周围有一个label元素时，我无法显示/隐藏它，但这就是引导程序指示您编写复选框的方式。以下是页面上项目的片段：

 <div class="col-md-12">
     <p>This is the weekly news updates section. </p>
     <div class="form-group">
         <label class="checkbox checkbox-blue" for="checkbox1">
             <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox" >
             I want to include an image.
         </label>
     </div>
     <div class="form-group" id="file_container">
         <input id="fileInput" type="file" name="file[]" class="file" data-show-upload="false" data-show-caption="true" >
     </div>    
     <div class="form-group">    
         <textarea id="count_me" class="form-control" rows="5" placeholder="Enter your weekly update here" required></textarea>
     </div>    
     <div class="form-group">    
         <input type="submit" name="submit" class="btn btn-info btn-fill" value="Submit" id="submit" />
     </div>  
 </div>

这是每周新闻更新部分

我想包括一个图像。

这里是javascript。它以当前的形式显示和隐藏小部件，但前提是我删除了标签。我无法将输入置于标签之外，因为它会弄乱格式，因此这是使用引导看起来正确的唯一方法：

<script type="text/javascript">
    $(document).ready(function () {
        $('#file_container').hide();

        $("#checkbox1").click(function(event) {

            if ($(this).is(":checked"))
            {
                $('#file_container').show();
            } else {
                $('#file_container').hide();
            }
        });
    }); 
</script>

$（文档）.ready（函数（）{
$（“#文件_容器”）.hide（）；
$（“#复选框1”）。单击（函数（事件）{
如果（$（this）.is（“：checked”））
{
$（“#文件_容器”）.show（）；
}否则{
$（“#文件_容器”）.hide（）；
}
});
}); 

---

所以问题是：当checkbox1位于标签后面时，如何访问它？

it。。作为旁注，您应该听的是

change

事件，而不是

click

事件。好的，谢谢您向我演示如何使用JSFIDLE。我看到它在那里工作，一旦我将它更改为更改事件而不是单击事件，它也在我的本地机器上工作。