小电商项目实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

商品的单选和全选


在购物车页面展示还是使用ejs模板(具体实现可参考贴图)来实现用户购物车商品的展示,现期间我们用到了checkbox,这里我们就来简单的实现商品的全选和单选。

首先,简单介绍实现步骤:

    1. 用户选中全选按钮时,列表内选框全部变为勾选状态。
    1. 用户取消全选按钮选中状态时,列表内选框全部取消勾选状态。
    1. 列表内选框为全部勾选状态时,全选按钮为选中状态,反之不勾选。
    1. 全选按钮未选中情况下,当列表内按钮全部选中则全选按钮也要被选中。

对于checkbox按钮如下图所示:

注:data-index属性存储索引值用来获取商品数量,data=id存储商品ID,data-price存储商品价格。

实现全选:为全选框(如id为CheckAll)添加单击事件,这里我们使用prop方法设置checkbox状态、is方法判断checkbox状态,如下参考示例:

 $('#CheckAll').click(function(){
       var self = $(this);
       $('input[name="chkItem"]').each(function(){
          $(this).prop("checked",self.is(':checked'));
       });
 });

实现单选:单选框(如name为chkItem)添加单击事件,这里我们使用prop方法设置checkbox状态、not方法判断checkbox状态,如下参考示例:

$('input[name="chkItem"]:checkbox').click(function(){
   var isCheck = $('input[name="chkItem"]:not(:checked)').length?false:true;
   $('#CheckAll').prop("checked",isCheck);
});

到这里我们就简单实现了按钮的全选和单选,以上方法可供参考也可以自行思路去实现。