如何添加复选框实现缺货商品的显示/隐藏切换功能？

步骤1：添加HTML复选框及商品结构 #

先在页面中加入控制用的复选框，同时确保每个缺货商品的DOM元素带有统一的类标识（比如out-of-stock）：

<label>
  <input type="checkbox" id="toggleOutOfStock"> 显示缺货商品
</label>

<!-- 商品列表示例，根据你的实际结构调整 -->
<div class="product-container">
  <div class="product in-stock">商品A（有货）</div>
  <div class="product out-of-stock">商品B（缺货）</div>
  <div class="product in-stock">商品C（有货）</div>
</div>

步骤2：编写jQuery控制逻辑 #

在你现有的价格控制代码所在的$(document).ready()函数中，新增复选框的状态监听逻辑：

$(document).ready(function() {
  // 初始状态：隐藏所有缺货商品
  $('.out-of-stock').hide();

  // 监听复选框的状态变化
  $('#toggleOutOfStock').on('change', function() {
    const isChecked = $(this).is(':checked');
    // 根据勾选状态切换缺货商品的显示/隐藏
    $('.out-of-stock').toggle(isChecked);
  });

  // ------------------------------
  // 你原有的价格控制代码放在这里
  // 比如：价格格式化、区间筛选等逻辑
  // ------------------------------
});

可选优化说明 #

• 如果你的项目已经定义了用于隐藏元素的CSS类（比如hidden），可以替换成类操作：

  // 初始隐藏
  $('.out-of-stock').addClass('hidden');
  
  // 切换时
  $('.out-of-stock').toggleClass('hidden', !isChecked);
  

• 若商品列表是动态加载（比如Ajax渲染），改用事件委托确保监听生效：

  $(document).on('change', '#toggleOutOfStock', function() {
    const isChecked = $(this).is(':checked');
    $('.out-of-stock').toggle(isChecked);
  });
  

• 注意和你现有代码的兼容性，确保商品的缺货标识类（out-of-stock）和实际DOM中的类名完全匹配。

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