16. 尚硅谷_佟刚_JavaScript DOM编程_实验之Checkbox全选.wmv原创

我们来看最后一个练习，那这个练习呢，在我们具体开发的时候呢，也很常见这样的，比方说，呃，全选全部选。我们经常会看到类似的操作，比方说我们在这个，嗯网盘上，哎，我要选一些文件进行删除啊，这个把它移到另一个文件夹呀，就这样是吧，全选，哎全部选还可以怎么办呢？全选还有这样一个功能啊，当我这个球有一个不选的时候，这个被挑掉，看见了吧，这个它不是全选了，要是全选中的话，它也跟着被选中，哎，这是一，这是一个练习，那底下这个跟上面这个是相分离的哈，全选。注意这个没这个没被选上，因为这实际上是两个练习，我放在一起了，全部选反选提交底下，这个的话呢，相对而言会更加直接一些。

我们先说上边的。全选全部选，然后的话呢，如果我真的把每一个都选上的话，他也跟着被选中。考虑一下这个功能应该如何实现，我首先呢把这个源码复制过来。C在我那个里边应该是EX7。好，我们现在的话呢，我们想写这个功能。

好说。ES7开价。这样好看着哈，全选都挑上，全部选都选没，当这四个球都被选中的时候，他也被选中，有一个没选中的话呢，这个角跟着需要先出一下需求。一种是。这样的，我们最开始的话呢，有一个这个什么，有一个全选，全部选一的不受影响啊，就是它这个一个弱。被告被选中。

则则什么呢？大家看我底下是不是写check box啊，你这个check box是什么？是不是名字叫啊？啊，Name等于I同学名字都一样哈，Name等于。Jack box都被选中，好说这个没被选中。取消，取消选择。是这个一这个都取消这个。这个都聚焦选中好了。好，还有还有说若这个都可以选中，则这个也被选中。

这个也被选好了，反过来再来，若这个有一个没被选中。有一个。没有被选中则怎么样，这个取消选中。有点乱，不要写其他呀。顶号。则被告取消卷宗。捋一下啊。这个是谁呢？这个是最上面的这个家伙，是他先选，全部选，说如果这个被选中的话，我们要求内姆是埃，斯内是埃，是不是一组啊，这一组也都被选中，没问题，说如果这个取消选中的话，注意哈，我说这个是主动哈，则这个都取消选中都吗？说如果这个的check box都被选中的话，那反过来这个也要被选中，如果这个里边有一个没被选中的话，这个取消选择就是我们的要求，就是说。

第二点。看选中没选中都被选中。上面跟着被选中，有一个没被选中取消，这就是我们说的过程，好，需求说完了，下面我们看怎么写呀。怎么写呀？

提示吧，提示大家说，首先的话，我们看这个事件要给事件。需要嫁给嫁给谁呀，嫁给他吧。嫁给他。Jay。给他老师，要是再给他的话，我怎么办呢说。判断。是否选中，说若被选中。给看，实际上的话呢，无论是不是被选中的话，是什么呀，我都要获取，获取什么呀，获取name等于it的check box，这应该是个什么数组吧，一个集合啊，它是被选中，如果要若被选中的话，若被选中。

什么box都要对选择好了，那我们如何来判断是不是被选择，以及如何使那个check box被选择呢？好的。反过来，若没有被选择，若判断，若没有被选择，若没有。选择这个都要取消选择。就行了，取消就可以了。就是我们的第一个层次好了，那这边有一个有一个什么问题啊，我如何判定。判定谁，这个这个box是不是被选择，怎么判定来着，根据。

是否存在？Check。属性。来判断是否。对，选择好了，那我如何让他选择或者是不让被选择呢？装可以。使其。使。使其什么使其。但属性等于to被选中。对，选择等于。

属性直接写吧，等于false取消。选择。这就可以了，好，我写给大家看看啊。window.on等于。写一个就给它吧，C c document点看element BYD看着点啊，用R，我们直接写S，等于写完。刷一下选上了啊，等于。都没没被选上啊，哎，可以通过这样的方式让他被选中，或者是没被选中，这是一个提示，那另外的话呢，还有什么呀，还需要给每个。

这个呢？八加什么呀？加响应函数，这响应函数应该是什么类型的，是不是点的啊，Click就可以了，好吧，好它是什么呢？说判断。判断。这个是否都被选中？OK，说说怎么判断是否都被选中啊？啊，怎么判断这个是不是都被选中啊，怎么判断呢。你可以便利。遍历所有。如果。有一个没被选中的话，是不是就不行啊，都被选中那就选中了，或者是判断选中的个数跟总个数是否相等也可以，你们这么说吧，来说选中的个数跟总个数是否相等，选中的个数和总个数。

是否相等就可以，哎说这要是都会选中的话，若都会选中，都会选择和。那么和使这个被选择CTRLC，使。它被选择好了，若没有O被选择，则是被告取消选择，这就可以了，这是我们这个提示，实际上这个提示的话呢，把今天这个提议的话呢，又认真的说了一遍，而且我们给出了对应的解决方案，我们如何判断是不是被选择呢？啊，我们通过这个点check等于true或者false就可以，那我如何判断你是否被选择呢？我可以直接通过把这个check放到那个if里边不就可以啊，昨天已经干过这个事了，OK，来写吧。

一起看一下这个具体实现。那我这个的话呢，需要写两个事件，一个是加给这个什么呀，再给这个全选，全部选答on click等于function。好了，首先需要判定我是不是被选中了。Flag等于s.r fact if如果被选中的话怎么样？如果没被选中的话怎么样？前提是什么呀？是不都得先就获取那个it啊，等于点看element吧。

It OK。OK，那我无论这个是不是选中的话，本身我这个值是不是就是一个布尔值啊，出根false，我直接这样写就可以了，说循环。或I等于零，I小于I点。哎，大家我让科慕斯。I。等于终于可以了，看样子呗。好一下选择取消CC。

对吧，我们自个儿的啊。选择取消好用吗？这样这个问题第一个问题就解决了。那反过来的话呢，还有一个我们还需要给这加事件啊，还需要给有的item加事件吧。CTRLCTRLV循环CTRLC，我需要给每一个都加加R。嗯。Click。等于function，然后怎么办呢？我也需要有一个flag，这个flag我是比。它是不是都被选中了，我怎么样说是不是都被选中了呀，那我这边有一个数量，然后的话呢，我对它进行一个便利吧。For循环。哇。G等于零。

接小于I，大家一个number等于零，那么是干啥用的呀？标记。记录有多少个被选中了，被。选中了八。If，如果什么呢？如果。接里边就是接哈点对一选中的话，我就让number大家好吧，那过来过来，那我具体写法就是我让。它CTRLC。这个啊，等于等于谁呀，等于X点是不是等于是不是可以了。

是吧，如果这两个要是等的话，可以选中，否则的话呢，不会选中刷新选择。好，挑一个没了吧。加上有吧。这也一样，过来看选择没了。加上这样这个就完成了。OK，那反过来底下这几个照比上面那个是不是要容易了呀，全选全部选反选以及提交，大家把上面那个完善一下，把底这个写完。我们把后边这个功能直接实现了啊，后面这个功能的话呢，需要给谁呢？需要给这个全选，全选我来找一下这个。

点D就全选哈。不这吗，点浅点。等于方式怎么写？全选的写法应该是这样写。就是C，因为这个X的呢，我这块已经获取到了，所以说这个等于就可以了吧。看全选OK，全部选全部选叫。No等于false，再看全选，全部选，还有一个是反选。

反选教。Check。是吧？有，那怎么办呢？完全怎么写反全等于以前这个取反吧。用写吧，以前这个取转来全选全部选，全选好了提交，提交这个的话呢，叫。也是一样的哈。提交，如果被选中的话，打印版。如果这个被选中的话，咱什么打就值了。

It。I打Y流，主镜还要薄。刷新反选足球篮球行吗？OK，到这块的话，这个练习就都写完了啊，我们认为第一个啊，第一个啊会有会有点意思啊，就是选这个，这个全选全部选啊，还有这个。然后这个要是搞定的话呢，底下这个还是比较轻松。