如何用CSS实现点击checkbox显示文本框并调整订购量文本框位置

1. 点击Checkbox时显示价格文本框列表 #

利用CSS的:checked伪类结合兄弟选择器，无需JS即可实现点击显示效果，完美适配动态加载的商品列表：

示例HTML结构 #

<div class="product-item">
  <input type="checkbox" id="prod-1">
  <label for="prod-1">商品名称</label>
  <!-- 默认隐藏的价格输入列表 -->
  <div class="price-input-group">
    <input type="text" placeholder="批发价">
    <input type="text" placeholder="零售价">
  </div>
</div>

对应CSS代码 #

/* 默认隐藏价格输入组 */
.price-input-group {
  display: none;
  margin: 8px 0 8px 24px; /* 缩进对齐，提升可读性 */
  gap: 12px;
}

/* 当checkbox被选中时，显示对应的价格输入组 */
input[type="checkbox"]:checked ~ .price-input-group {
  display: flex; /* 横向排列输入框，改为block可实现纵向排列 */
}

原理：~是通用兄弟选择器，会选中checkbox之后所有同级的.price-input-group元素，动态生成的商品列表只要保持这个层级结构，就能自动生效。

2. 将订购数量文本框布局在Checkbox左侧 #

用CSS Flex布局调整元素顺序，无需修改动态生成的HTML结构：

示例HTML结构 #

<div class="product-item">
  <input type="checkbox" id="prod-1">
  <label for="prod-1">商品名称</label>
  <input type="text" class="quantity-input" placeholder="订购数量">
</div>

对应CSS代码 #

.product-item {
  display: flex;
  align-items: center;
  gap: 8px; /* 控制元素间间距 */
  margin: 4px 0;
}

/* 调整元素显示顺序：数量框排第一，checkbox第二，标签第三 */
.quantity-input {
  order: 1;
}
input[type="checkbox"] {
  order: 2;
}
.product-item label {
  order: 3;
  flex: 1; /* 让标签占剩余宽度，避免换行 */
}

如果需要兼容老旧浏览器，也可以使用浮动方案：

.product-item {
  overflow: hidden; /* 清除浮动影响 */
  margin: 4px 0;
}
.quantity-input {
  float: left;
  margin-right: 8px;
}
input[type="checkbox"], .product-item label {
  float: left;
  margin-right: 8px;
}
.product-item label {
  overflow: hidden; /* 标签自动填充剩余宽度 */
}

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