求救,做毕设遇到了一个问题html元素的id改变问题。

<input type="file"
                               name="fileToUpload"
                               class="filestyle"
                               data-buttonName="btn-primary"
                               data-buttonBefore="true"
                               data-icon="false"
                               accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                               onclick="this.value=''" onchange="excelToECharts(this)">

这是我的上传文件按钮

<input type="radio" name="radio" id="inputPie" value="" onclick="change(this.id)">

这是单选框按钮

function change(id) {
        // document.getElementsByName("fileToUpload")[0].setAttribute("id",id);
        // console.log(document.getElementsByName("fileToUpload")[0].id);
        $("input[name=\'fileToUpload\']").attr('id',id)
    }

这是单选框的点击事件

我要根据选择的单选框的id值去赋给上传按钮的id值。就是说我的input按钮默认是没有id值的,我一点击某个radio按钮就会把它的id值赋给input。

但问题来了,如果我不点击radio,直接点击input就可以弹出选择文件上传的框。但是我一点击radio,input的值会改变但是不会出现上传文件的对话框。我打开过F12,input的值会随着我的radio的改变,但就是不能上传文件。

我把change函数里面的那句话注释掉之后,无论我点击哪个radio再点击input都可以正常上传文件。所以我推测功能失效是因为input的id发生改变之后失效,但是我不知道怎么解决。

跪求大佬帮忙!!!

 

不需要radio的id,change函数的参数直接用字符串
<input type="radio" name="radio" value="" onclick="change('inputPie')">
 

不清楚你的具体情况,猜测是把radio按钮的id值赋给input的id。
这样两个元素的id就重名了,页面中元素的id应该是唯一的,不能重名。
 

代码里面点击ctrl+F查找id是否多个

 

<label><input type='radio' data-id="radio1" name="radio" value="1" onchange="a()">男</label>
<label><input type='radio' data-id="radio2" name="radio" value="2" onchange="a()">女</label>

function a(){
    //event.target;这个就是你的触发事件的dom元素
     $(event.target).attr("data-id")
       // 你可以用别名或者其他地方取到值
    $(event.target).val()//取值之类的
}

这样就是暂时不用和你的id关联