when the file upload (multiple) complete, the checkbox will auto check

I'm doing a form that after the user upload the file, the checkbox will auto check, so that the user will know that their file had been uploaded.

In the form, there will have few "file upload input" and one "multiple file upload input", each of it will have a checkbox beside that will automatically checked after the file had been uploaded.

here is my code for file upload

<div><input type="checkbox" id="application" value="application" name="application"/><label for="application"><span></span></label>
</div>
<div>
    <div>Application Form</div>
    <div>
        <input id="filename1" type="text"/> 
        <div class="fileUpload btn btn-primary">
            <span>Add</span>
            <input id="uploadBtn1" type="file" class="upload" name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
        </div>
    </div>                                                         
</div>

<div><input type="checkbox" id="application2" value="application2" name="application2"/><label for="application2"><span></span></label>
</div>
<div>
    <div>Application Form2</div>
    <div>
        <input id="filename2" type="text"/> 
        <div class="fileUpload btn btn-primary">
            <span>Add</span>
            <input id="uploadBtn2" type="file" class="upload" name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
        </div>
    </div>                                                         
</div>

Script

document.getElementById('uploadBtn1').onchange = uploadOnChange;

function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    document.getElementById('filename1').value = filename;
}

here is the fiddle http://ift.tt/1WDJPpr

here is the code for multiple file

<div><input type="checkbox" id="payment" value="payment" name="payment" /><label for="payment"><span></span></label>
</div>
<div>
    <div>Payment</div>
    <div>
        <div id="upload_prev"></div>
        <div class="fileUpload btn btn-primary">
        <span>Add</span>
        <input id="uploadBtn" type="file" class="upload" multiple name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
    </div>                                                         
</div>

script

$(document).on('click','.close',function(){
    $(this).parents('span').remove();

})

document.getElementById('uploadBtn').onchange = uploadOnChange;

function uploadOnChange() {
    var files = $('#uploadBtn')[0].files;
    for (var i = 0; i < files.length; i++) {
     $("#upload_prev").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
    }
    document.getElementById('filename').value = filename;
}

here is the fiddle for multiple file http://ift.tt/1J3e4N3

I have to separate the script because it unable to function at the same time.