如何使用 HTML/Javascript 单选按钮来提示特定的下载？

Question

我试图让用户从 link 的五个单选按钮中选择一个单独的文件，然后单击 "Accept & Download" 按钮，他们下载他们在单选按钮。

这就是我下面的内容。当我单击其中一个单选按钮并单击下载时，没有任何反应。

Javascript:

<script>
var isgeorge = document.getElementById('george').checked;
var ismaci = document.getElementById('maci').checked;
var isandre = document.getElementById('andre').checked;
var iscaroline = document.getElementById('caroline').checked;
var isthai = document.getElementById('thai').checked;

var button = document.getElementById('download');
button.onclick = downloadFile;

function downloadFile() {
if(isgeorge) {
window.open("gaa2dn-resume.docx");
    }else
if(ismaci) {
window.open("maciresume.docx");
    }else
if(isandre) {
window.open("andreresume.pdf");
    }else
if(iscaroline) {
window.open("cpw6n-resume.pdf");
    }else
if(isthai) {
window.open("tk9kb-resume.pdf");
    }
}

HTML 在此图像中： http://i.imgur.com/2eSc3BF.png

Answer 1

您应该在函数中获取选中的值。 isgeorge 并且其他变量不会在复选框更改时自动更新

所以您所要做的就是将变量移到函数中

function download(){
        var isgeorge = document.getElementById('george').checked;
        var ismaci = document.getElementById('maci').checked;
        //etc etc etc

演示

注意： 因为堆栈片段不允许创建新的 windows 演示只是显示一条消息。

var log = document.getElementById('log');
var button = document.getElementById('download');
button.onclick = downloadFile;

function downloadFile() {
    var isgeorge = document.getElementById('george').checked;
    var ismaci = document.getElementById('maci').checked;
    var isandre = document.getElementById('andre').checked;
    var iscaroline = document.getElementById('caroline').checked;
    var isthai = document.getElementById('thai').checked;
    if(isgeorge) {
        log.innerText = "would have opened: gaa2dn-resume.docx";
        //window.open("gaa2dn-resume.docx");
    } else if(ismaci) {
        log.innerText = "would have opened: maciresume.docx";
        //window.open("maciresume.docx");
    } else if(isandre) {
        log.innerText = "would have opened: andreresume.pdf";
        //window.open("andreresume.pdf");
    } else if(iscaroline) {
        log.innerText = "would have opened: andreresume.pdf";
        //window.open("andreresume.pdf");
    } else if(isthai) {
        log.innerText = "would have opened: tk9kb-resume.pdf";
        //window.open("tk9kb-resume.pdf");
    }
}

<label for="george">George</label><input type="radio" name="download" id="george" /><br />
<label for="maci">Maci</label><input type="radio" name="download" id="maci" /><br />
<label for="andre">Andre</label><input type="radio" name="download" id="andre" /><br />
<label for="caroline">Caroline</label><input type="radio" name="download" id="caroline" /><br />
<label for="thai">Thai</label><input type="radio" name="download" id="thai" /><br />

<button id="download">Download</button>

<div id="log"></div>

如何使用 HTML/Javascript 单选按钮来提示特定的下载？

How do I use HTML/Javascript radio buttons to prompt specific downloads?

html

javascript

download

button

radio