如何刪除表單輸入數據點擊複選框？

如果用戶正在選擇文件，並且之後如果用戶取消選中複選框比文件也在那裏，所以我想使它像一個當用戶取消選中複選框比之後文件必須刪除。我怎麼做到的？哪個事件處理程序適用於複選框？ 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>

來源

2016-09-25 shah rushabh

缺少''廚房 –

如果你想刪除'input.file'對象的值，你應該使用'$（「＃efileu input」）。val（「」）;'清除它的值。請參閱https://jsfiddle.net/shaoran/rathxw43/ – Pablo

似乎只使用'.val（「」）'是不夠的，請參閱http://stackoverflow.com/questions/1043957/clearing-input-type -file-using-jquery – Pablo

使用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 
}

來源

2016-09-25 03:33:47

感謝他爲我工作。 –

找到一個可行的解決方法：

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

來源

2016-09-25 02:23:58

如何刪除表單輸入數據點擊複選框？

回答

相關問題