如何链接输入按钮显示：无行为与标签 [英] How to link input button display:none behavior with the label

问题描述

我想将输入 display：none 按钮链接到标签，这样当我点击标签时，它与我的隐藏输入按钮具有相同的行为。我该怎么做？

I want to link an input display: none button to a label so that when I click on the label, it has the same behavior of my hidden input button. How can I do this?

以下是我的HTML5代码：

Below is my HTML5 code:

<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" th:required="true"  />                

推荐答案

如果你想要标签在输入type = file 上触发点击事件，然后使用：

If you want the label to trigger a click event on the input type=file, then use:

$('.uploadFile').click(function() {
  $("#model1").unbind('click').bind('click');
})

我是还添加了如何将文件名添加到标签：

I've also added how to add the file name to the label:

$('#model1').change(function() {
 var filename = $(this).val().split('\\').pop();
 $('.uploadFile').text(filename)
})

$('.uploadFile').click(function() {
  $("#model1").unbind('click').bind('click');
})

$('#model1').change(function() {
 var filename = $(this).val().split('\\').pop();
 $('.uploadFile').text(filename)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="model1" class="uploadFile">File...</label>
   <input id="model1"  type="file"    name="model1" class="model1"
style="display:none;" th:required="true"  />

这篇关于如何链接输入按钮显示：无行为与标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！