Label makes checkbox not work

I am creating a page with a single checkbox. When this checkbox is clicked, a file input widget comes up so that the user can upload an image. The issue is that I cannot show/hide the widget while there is a label element surrounding it, but this is how bootstrap instructs you to code checkboxes. Here is a snippet of the items on the page:

 <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>

And here is the javascript. This works in its current form to show and hide the widget, but only if I remove the label. I cannot put the input outside of the label because it messes up the formatting, so this is the only way that it will look correct using bootstrap:

<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>

So the question is this: How do I access checkbox1 when it is behind a label?