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

【问题标题】：how to remove form input data on clicking on checkbox?如何在单击复选框时删除表单输入数据？
【发布时间】：2017-02-02 14:36:28
【问题描述】：

如果用户正在选择文件，如果用户取消选中复选框，则文件也在那里，所以我想让它像用户取消选中复选框时一样，而不是必须删除文件之后。我怎样才能做到？哪个事件处理程序最适合复选框？ 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>

【问题讨论】：

厨房缺少</label>
如果你想删除input.file对象的值，你应该用$("#efileu input").val("");清除它的值。见jsfiddle.net/shaoran/rathxw43
看来只用.val("")是不够的，见stackoverflow.com/questions/1043957/…

标签： javascript jquery html

【解决方案1】：

找到一个可行的解决方法：

  $(".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】：

在你现有的代码中使用这行 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
}

【讨论】：