基于Tailwind用两个SVG图标实现复选框式升降序切换开关

要实现基于Checkbox的升降序图标切换，你可以通过Tailwind的peer类配合条件显示类控制两个SVG的显示状态，同时隐藏原生复选框，仅保留图标作为交互区域。以下是修改后的完整代码：

<script src="https://cdn.tailwindcss.com"></script>
<div>
  <!-- 隐藏原生复选框，保留peer类用于状态关联 -->
  <input 
    id="orderasc" 
    name="orderasc" 
    type="checkbox" 
    onclick="searchType()" 
    class="peer hidden" 
  />
  <!-- 点击区域容器，设置相对定位让图标重叠 -->
  <label for="orderasc" class="relative inline-block cursor-pointer">
    <!-- 未选中时显示的向下箭头（降序） -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="#0d9488"
      class="size-12 peer-checked:hidden"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m4.5 15.75 7.5-7.5 7.5 7.5"
      />
    </svg>
    <!-- 选中时显示的向上箭头（升序），初始隐藏，绝对定位与另一个图标重叠 -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="#0d9488"
      class="size-12 hidden peer-checked:block absolute top-0 left-0"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m19.5 8.25-7.5 7.5-7.5-7.5"
      />
    </svg>
  </label>
</div>

关键修改说明 #

• 隐藏原生复选框：给<input>添加hidden类，只保留peer类关联后续状态样式。
• 图标重叠布局：给<label>设置relative，两个SVG添加absolute top-0 left-0，确保它们在同一位置显示。
• 状态切换控制：
  • 未选中时显示的图标：添加peer-checked:hidden，复选框选中时自动隐藏。
  • 选中时显示的图标：初始用hidden类隐藏，通过peer-checked:block让复选框选中时显示。
• 交互优化：给<label>添加cursor-pointer，提示用户该区域可点击。

JS逻辑调整建议 #

你的searchType()函数可以这样获取当前排序状态：

function searchType() {
  const checkbox = document.getElementById('orderasc');
  const isAsc = checkbox.checked;
  // isAsc为true时是升序，false时是降序
  console.log(isAsc ? '升序' : '降序');
  // 在这里执行你的排序逻辑
}

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