多选框练习--js实现

我会带着你远行 2022-11-27 10:16 163阅读 0赞

描述：进行多选框的练习，进行全选，全不选，反选，点击发送时打印出所选的信息。具体页面如下 ![要进行选择的多选框][20200814215404999.png_pic_center]  
实现：  
1.进行全选，全选的同时，最上面的全选全不选也要选上，即代码中的checkallBox，代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center]  
2.全不选，最上面的全选全不选的checked要为false，代码如下：  
![在这里插入图片描述][20200814220116621.png_pic_center]  
3.反选（遍历所有checkbox,将他们的checked值取反），如果之前是全选或全不选状态时，进行反选时也要对最上面的全选全不选状态进行判断，代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 1]  
4.点击发送按钮时，弹出所选框的值，代码如下：  
![在这里插入图片描述][20200814221051973.png_pic_center]  
5.当点击最上面的全选全不选选框时，进行下面选框的全选或全不选，代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 2]  
6.当选中四个框或取消四个框时，全选/全不选也自动选上或取消（给每个框绑定一个函数，检测是否都选上了，都选上则设为true）代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 3]

[20200814215404999.png_pic_center]: /images/20221124/43abc532590e41c9ac4d8837b2bf3b3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/02fe6473ee654232b38e8ec9d34cba6b.png
[20200814220116621.png_pic_center]: /images/20221124/4804c2677ad6437ba1091cfa56c01c00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/b0fb11c2e48e416e960a334c78c7df51.png
[20200814221051973.png_pic_center]: /images/20221124/2dbeae1106e84b9bbbe5204c8d1a1a44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/06bcfd6501064b7e81e995e296a34753.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/1ffa77109de64505956166e9fc401f91.png