Question

如果用户正在选择文件，之后如果用户取消选中复选框，则文件也在那里，所以我想让它像用户取消选中复选框一样，而不是必须删除文件后。我该怎么做？哪个事件处理程序非常适合复选框？ HTML代码：

<div class="checkbox">
  <label for="email">electronics
  <input type="checkbox" name="product_category[]" value="electronics" id="product_category" class="electronics">
  </label>
</div>
<div class="form-group" id="efileu" style="display:none;" >
  <input type="file" name="checkboxfile0" id="efile"   style="width:100%">
</div>
<div class="checkbox">
  <label for="email">kitchen
  <input type="checkbox" name="product_category[]" value="kitchen" id="product_category" class="kitchen">
</div>
<div class="form-group" id="kfileu" style="display:none;" >
  <input type="file" name="checkboxfile1" id="kfile"   style="width:100%">
</div>

<script>
$(".electronics").click(function(){
    if(!$("#efileu").is(":visible")){
      $("#efileu").show();
    }
    else{
      $("#efileu").hide();
      $("#efileu").val();
    }

});
$(".kitchen").click(function(){
    if(!$("#kfileu").is(":visible")){
      $("#kfileu").show();
    }
    else{
      $("#kfileu").hide();
    }

});
</script>

Answer 1

在你现有的代码中使用这一行jQuery，对我来说似乎很好

else{
    $("#efileu").hide();
    $("#efileu").replaceWith($("#efileu").val('').clone(true)); //clear the values
}

else{
    $("#kfileu").hide();
    $("#kfileu").replaceWith($("#kfileu").val('').clone(true));//clear the values
}

Answer 2

找到有效的解决方法：

  $(".electronics").click(function() {
    if (!$("#efileu").is(":visible")) {
      $("#efileu").show();
    } else {
      var $el = $('#efileu');
      $el.wrap('<form>').closest('form').get(0).reset();
      $el.unwrap();
      $("#efileu").hide();
    }

这是一个JSFiddle，可以看到它的实际效果。积分转到Gyrocode。

如何在单击复选框时删除表单输入数据？

2 个答案: