如何默认隐藏div，通过单选按钮控制其显示？

核心问题分析 #

• JS函数未执行：init()函数里的hideAAndB仅引用函数，未触发执行，需改为hideAAndB();
• 单选按钮不互斥：两个单选按钮name属性不一致（一个为delivery，一个为pickup），导致可同时选中，不符合业务逻辑
• 样式属性混用：初始用display:none控制隐藏，切换时却用visibility，两种属性混用易引发样式冲突

修正后的代码 #

1. JavaScript 代码

function hideAAndB() {
  var pickupDiv = document.getElementById("pickupDiv");
  var deliveryDiv = document.getElementById("deliveryDiv");
  pickupDiv.style.display = "none";
  deliveryDiv.style.display = "none";
}

function showDelivery(x) {
  if (x.checked) {
    document.getElementById("pickupDiv").style.display = "none";
    document.getElementById("deliveryDiv").style.display = "block";
  }
}

function showPickup(x) {
  if (x.checked) {
    document.getElementById("deliveryDiv").style.display = "none";
    document.getElementById("pickupDiv").style.display = "block";
  }
}

function init() {
  hideAAndB(); // 补全括号，执行隐藏函数
}

window.onload = init;

2. CSS 代码

#deliveryDiv,
#pickupDiv {
  display: none; /* 仅保留display属性即可，无需重复设置visibility */
}

3. HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Order Page</title>
  <meta charset="utf-8" />
  <meta name="description" content="Order page for Sweet Life.">
  <meta name="keywords" content="study">
  <meta name="author" content="Anon">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script1.js"></script>
</head>

<body>
  <div id="orderhtml">
    <!--Header-->
    <header>
      <h1 class="header" id="headerTop">Sweet Life</h1>
      <h2 class="header" id="headerBottom">Discover a world of ice cream...</h2>
    </header>
    <!--Navigation bar-->
    <div id="topnav">
      <nav class="nav">
        <a href="order.html">Order online</a>
        <a href="register.html">Register</a>
        <a href="index.html">Home</a>
      </nav> <!-- 修复原代码中多余的</ul>标签 -->
    </div>
    <div class="tagline">
      <h2>Order</h2>
    </div>
    <!--Form-->
    <form id="orderForm">
      <p>First, select either delivery or pickup:</p>
      <label for="delivery">Delivery</label>
      <input type="radio" id="delivery" name="orderType" onchange=showDelivery(this) value="Delivery"><br>
      <label for="pickup">Pickup</label>
      <input type="radio" id="pickup" name="orderType" onchange=showPickup(this) value="Pickup"><br>
      <div id="pickupDiv">
        <br/>自提相关内容</div>
      <div id="deliveryDiv">
        <br/>配送相关内容</div>
    </form>
  </div>
</body>
</html>

额外优化说明 #

• 函数名改为语义化的showDelivery/showPickup，提升代码可读性
• 修复HTML中导航栏的标签闭合错误
• 统一使用display属性控制显示/隐藏，避免属性冲突

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