Question

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

 <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。这是以其当前形式显示和隐藏窗口小部件，但仅当我删除标签时。我不能把输入放在标签之外，因为它会弄乱格式化，所以这是使用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>

所以问题是这样的：当它在标签后面时如何访问checkbox1？

标签使复选框无效

0 个答案: