HTML+CSS+JavaScript:全选与反选案例

一、需求

1、单击全选按钮,下面三个复选框自动选中,再次单击全选按钮,下面三个复选框自动取消选中

2、当下面三个复选框全都选中时,全选按钮自动选中,下面三个复选框至少有一个未选中,全选按钮自动取消选中

HTML+CSS+JavaScript:全选与反选案例_第1张图片

 二、代码素材

以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写






    
    
    



    
全选 商品 商家 价格
小米手机 小米 ¥1999
小米净水器 小米 ¥4999
小米电视 小米 ¥5999

三、算法思路

1、获取相关元素

2、为全选框绑定鼠标点击事件,当点击事件触发时,将下面三个复选框的状态设置为与全选框一致

3、利用事件委托为下面三个复选框绑定鼠标点击事件,当任意一个复选框触发点击事件时,判断下面三个复选框是否全为选中状态,若全选中,则将全选框设置为全选,否则不设置。

四、完整代码






    
    
    



    
全选 商品 商家 价格
小米手机 小米 ¥1999
小米净水器 小米 ¥4999
小米电视 小米 ¥5999

你可能感兴趣的:(html,前端)