如何用href链接替代按钮触发复选框关联的div显示功能？

我已经搞定了用复选框选完点按钮显示对应Div的功能，现在想把触发用的按钮换成href链接，实现一模一样的效果。原功能的核心逻辑是：根据复选框的选中状态，显示或隐藏对应的Div。

修改后的代码实现 #

HTML 部分

<input type="checkbox" id="chk1" placeholder="Yes">
<label>Div 1</label>
<input type="checkbox" id="chk2" placeholder="Yes">
<label>Div 2</label>
<br />
<!-- 替换按钮为a标签 -->
<a href="#" onclick="return showDiv()">Check!</a>
<br />
<div class="div1">Div no 1</div>
<div class="div2">Div no 2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScript 部分

$div1 = $(".div1");
$div2 = $(".div2");

// 初始隐藏两个Div
$div1.hide()
$div2.hide()

function showDiv() {
  // 根据复选框状态切换Div的显示/隐藏
  $div1.toggle(document.getElementById('chk1').checked);
  $div2.toggle(document.getElementById('chk2').checked);
  
  // 阻止a标签默认跳转行为，避免点击后跳到页面顶部
  return false;
}

关键说明 #

• 把按钮换成<a>标签时，给href设为#是为了保留链接的可点击视觉样式，同时通过return false阻止点击后跳转页面的默认行为。
• 用jQuery的toggle()方法可以简化原有的if-else判断，直接根据复选框的checked值一键切换显示/隐藏状态，逻辑更简洁。

内容的提问来源于stack exchange，提问作者James