如何通过单选按钮实现元素的显示与隐藏

问题排查与修正点 #

1. 本地路径无法在网站中使用：你代码里的C:\Users\DSGO\Downloads\...是本地绝对路径，部署到网站后浏览器无法访问，需要将CV文件放到项目目录中，使用相对路径（比如把CV放在项目的assets文件夹下，路径写成./assets/Tom-O'Hanlon-CV.pdf）。

2. img标签无法加载PDF文件：PDF不是图片格式，<img>标签无法渲染它，你可以改成文本下载链接，或者用<iframe>/<embed>来嵌入显示PDF内容。

3. 事件监听优化：单选按钮更适合用change事件而非onclick，同时可以处理点击"No"时隐藏CV的逻辑。

修正后的完整代码 #

HTML部分

<p>你是否愿意聘用我？</p>
<form>
  <input type="radio" id="yes" name="hire" value="Yes">
  <label for="yes">Yes</label>
  <input type="radio" id="no" name="hire" value="No">
  <label for="no">No</label>
</form>

<br>

<!-- 方案1：显示下载链接 -->
<a
  id="cv-link"
  style="display:none"
  href="./assets/Tom-O'Hanlon-CV.pdf"
  download="Tom O'Hanlon CV">
  下载我的简历
</a>

<!-- 方案2：嵌入显示PDF（可选） -->
<iframe
  id="cv-embed"
  style="display:none; width: 100%; height: 600px;"
  src="./assets/Tom-O'Hanlon-CV.pdf">
</iframe>

JavaScript部分

// 获取单选按钮组
const hireRadios = document.querySelectorAll('input[name="hire"]');
// 获取CV元素
const cvLink = document.getElementById('cv-link');
const cvEmbed = document.getElementById('cv-embed'); // 如果用嵌入方案

// 给每个单选按钮添加change事件监听
hireRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.value === 'Yes') {
      cvLink.style.display = 'inline-block'; // 显示下载链接
      // cvEmbed.style.display = 'block'; // 如果用嵌入方案，打开这行
    } else {
      cvLink.style.display = 'none'; // 隐藏下载链接
      // cvEmbed.style.display = 'none'; // 如果用嵌入方案，打开这行
    }
  });
});

额外说明 #

• 确保CV文件的路径正确，和HTML文件的相对位置对应。
• 如果选择嵌入PDF的方式，部分浏览器可能需要用户允许加载PDF插件，兼容性不如下载链接稳定。

内容的提问来源于stack exchange，提问作者Tom O'Hanlon