98.尚硅谷_JS基础_全选练习（一）

刚才呢，我们这块是把这个盗墓查询呢，大体上常用的一些东西给说了啊，那接下来呢，我们来说一个这个，呃，说一个练习啊，你开我们这块有一个这个添加删除记录这么一个练习啊，那也不是添加删除了啊，我们这个全选这个练习啊，先看第一个这个呢，是我们已经完成的一个功能啊，我现在打开看看效果，一打开这个页面呢，是这么一个这个页面，诶那这里边呢，其实看页面比较简单，是一堆的一堆什么呀，是不是这个boss我的那个多选块对吧？你可以在这勾啊，我爱足球，爱篮球，爱羽毛球，爱羽毛球你都可以给它勾上，然后呢，这里边我看着啊，我一点这个全选，有一个按钮，全选全部选反选，还有一个提交，我一点全选就完了，是不是所有的勾都打上来呀，哎，我一点全部选咔是不是都没了呀，来我选篮球，我点谁呢？点反选咱们来看我一点完了，选中的时候变成没选中，没选中变成选中，都跟刚才那状态是一个相。

反的一个状态吧，诶反选，然后还有什么呢？提交看什么效果，我一点诶篮球，诶你看只出一个篮球，为什么呀，是不是只选了篮球啊，哎，我再选羽毛球，我一点篮球羽毛球对吧，我来一个全选足球篮球羽毛球是不是都出来了，哎，都出来了啊，这是我们说这么一个笑话啊，这个东西平时上网的时候应该应该也见到过这种东西，对吧？诶方便我们去勾选这么一个东西的，那这课练习我们来看看我们要怎么去完成它啊，怎么完成它那这块呢，我先来把这个东西啊，它有两个，一个是诶这一空白的，我把这空白的CTRLC我给它粘过来，这直接改个名我们了。还有一个零二，我们叫做一个全选这个练习啊，全选练习。这一改名我们全都没了，零二我们来一个这个全选这个练习，然后看一下面好打开它，我们来看看啊，这一块呢，咱们先运行一下，这个呢，是我们没有实现功能的，就说现在你点这玩意儿干嘛呀，它是不是都不好用啊，哎，都不好用啊，我们就来在这个页面里面做，那我们还是先看看我们这里边干嘛呢？哎，先看看我们这里边它的整个一个页面的一个结构，首先呢，诶上边是一堆是什么呀，基本的一个网页，那下边这一个什么呀？Form我们的这个表单，表单里边有这么多这种表单项，诶check box啊，Check box check box check box1堆check box对吧，然后下边这4CHECK box是我们这个爱好，什么足球啊，篮球啊，羽毛球，羽毛球四个爱好，他们有一个共同的这个name叫什么呀？叫做一个it啊，It它们的name都是一样，然后呢，在我们往下边有四个按钮，四个按钮的名字分别是全选。

全部选反选，还有一个提交他们呢，每一个人都有他自己的一个ID，全选叫一个check的on button，诶反选全部选择一个check的no button，反选择一个check什么呀，RI button，然后呢，诶这个叫做一个send button啊都有ID，那现在呢，页面比较简单，那上边我们这个window荚经给我们干嘛了，写好了啊，Window已经给我们写好了，那我们要做的工作就是什么呀，在window里是不是来写我们这个代码了呀？哎，那我们来看这功能一个一个来，第一个功能我们来看叫什么呀，全选，全选什么效果呀，我一点击按钮以后，这几个多选框是不是都选中啊，哎，都选中，所以咱们来先来描述一下这个功能，第一个功能我们叫怎么呢？叫做一个全选按钮，全选按钮什么功能叫什么呢？点击按钮以后，我们这什么呀，是不是这一共有四个多像框啊，这四个应该全都。

都被选中吧，哎，全都被选中叫什么呢？点击按钮以后，四个多选框全都被选中啊，四个多选框全都被选中，那现在这个功能我们要怎么做。

现在干嘛？诶他让你干嘛呀，点击按钮以后才选吧，诶所以第一件事你先干嘛呀，你得先知道他点了吧，诶那你就需要为这个按钮来绑定这么一个单击响应函数，这按钮我们来看ID叫做一个check的o button，实际上这ID马来是不是已经给咱们写这了，哎写这了啊所以这里边我们来干嘛呢？哎干这件事为我们这个ID，为什么呢？诶为它的这个按钮来绑定一个这个单击响应函数，直接挖一个它这o button等于一刀这么的点一个get摆ad，然后这来一个check or button，然后呢，Check or button，点一个on click等于个这个function function我们这来一什么呢？来一个A乐，A乐来一个什么呢？诶全全都选中了，然后一保存，咱们来看效果，我这1.1刷新现在。

总你诶是不是全都选中了，哎一确定，但是呢，他们只是说是吧，选没选啊没选他不可能选选就新型是吧，还选新型，所以现在单击响应函数绑定完了，单击响应函数绑定完了，就说在这个单击响应函数里，我要干嘛呀，我要设置我们这个四个框变成选中状态了，哎来设置我们这四个多选框变成我们这个选中状态，那我要想把这四个，这四个是不是就是这哥四个呀，足球篮球羽毛球，那我要想让他们选中，我得先干嘛。我得先干嘛，我是不是得先取他们呀？哎，你只有获取完了，你是不才能选啊？哎，那我们来看看怎么获取这四个有什么特点，他们是不是有一个共同的内叫it，诶叫it，所以干嘛呢？你要让他们先选中，你是不是先获取他们四个呀？哎，所以我们来在这还干嘛呢？来获取我们这四个多选块，诶他们有一个name容叫做it，那我怎么获取啊，直接挖一个items等于什么呀？Document点一个get by name是不是根据name属性获取啊，而且我们当时说了name，这个get element by name也是主要来操作我们这些表单项的，而他们是不是正好就是表单项，哎，就是专门用来对付他们。好，It有了，那接下来我是要让它们变成一个选中状态啊。哎，我先看看对不对吧？我来什么呢？Alert，一个it点一个let。

诶，如果对，是不是应该是四个呀，哎，来，我一刷新咱们这一点走，你是四个呀，好有了，那接下来呢，我要把这四个变成选中状态了，那问题来了，那怎么变呀，现在说我这么变行不行，我得干嘛呀。我要把这四个变成小么状态，我是不是得一个一个的去选呀，哎，一个一个变，但是现在这it是个什么呀，这个数组吧，哎，你所以你需要干嘛呀，是不是需要先便利我们这个it呀，哎，你得去一个一个去设置啊，一个一个去设置来，那我直接来一个便利就好，简单了，直接挂一个，呃，I等于零，然后I小于it，点一个Les，然后来一个I加加，然后呢，在我们这it I是不是就是我们每一个多框，哎，每一个多元框好了，对象框有了，接下来呢，我就要干嘛呀，要将这个it it是不是设置为选中状态啊？哎，那这一块思路应该能明白吧，诶，但是又有新问题了，就我怎么让它变成选中状态呀。

咱们这玩意儿是不是不知道啊，咱们先想一想，那如果想让它变成选状态，无非就是掉个方法，要么就是什么呀，改个属性对吧，也就是这两招，那问题是现在什么样，我们不知道是哪个方法哪个属性吧，那怎么办呢？我呃是不是最好能有个地方能查一下啊，诶去哪查呢？诶我们这有一个这个文档W3死路离线手册，还是来看它看哪呢？我再给你找一下啊，还是我们这个Java script的就直接点javascript的，有一个这个Java script的这个对象，直接点开它，就是我们之前老看的页面往下看，你看这是不是有一堆H填门对象啊，你看什么A呀RA啊，什么贝呀，Bodyy，一堆对象啊，一堆对象，我们要找的是谁啊，我们是不要改这个音铺的，它是一个这个这个多样框，它是一个音的吧，所以我们要找的是那个什么呀，音铺的，但是音铺的问题来了，我这是不是有一堆音铺的呀，找谁呀。

是不是拆个boxs呀，搁哪呢？第二个就是，诶所以你要找到的是这个拆box，点开它我们来看拆个box对象的属性啊，什么属性一方法什不都给你列出来了，哎，我们来看看是谁，看看哪个是啊一堆属性的，先看属性啊，诶我看到有这么一叫什么呢拆诶有一个属性就叫check，刚才描述叫什么呢？设置或返回check box是否应被选中，诶设置或返回拆boxs是否应被选中，那我们来看看属性在这儿了，那其实我们要找的是不是就是它呀？诶如果你要还不明白干嘛呢？点开看一下啊看一下看它这个用法叫什么呢？Check box object多选框的这个对象，点check等于处竖线表示什么呀？或者什么呢？False啊等于true或者是false，也就说诶等于true应该什么呀？

是不是选中啊，等于first呢，是不是不选中啊，哎，不选中我们来说一下，通过我们这个多选框的这个什么呀，Keed check的属性可以什么呢？诶可以来干嘛呢？诶获取或者是什么呀，或者设置我们这什么呀，我们这个多选框的一个什么呀，选中状态他注意啊，它都是多功能的，可以获取，也可以设置，怎么就获取了，比如说我直接来一个alert alert一个什么呢？Alert一个这个I特模是I点一个check e e，那这表什么呀，这表示获取，我要干嘛呀，我要看看它是不是选没选中吧，哎，选没选中我们先看效果啊，我这个刷新现在四个是不是全选中了，我一点处是不是全是处来，我都给它取消掉。

我再点走你for false for是不是全是false，哎，所以注意，如果你直接用的话干嘛呀，它可以获取啊获取诶那获取的时候如果选中是返回处，如果没选中是返回false，哎反false，那我现在干嘛呀，我现在不想获取，我要干嘛呀，我是不是要设置啊，诶设置怎么设置啊，I特4I点一个哎CH等于什么呢？等于触，等于触表示什么？哎让他们都选中啊，他们都选中，如果等于for呢嘛呢，哎都不选啊，都不选，我们来看效果啊，来看效果，现在我这个刷新现在是不是都没选啊，诶我这一点全选走你。

是不是都选上了，来CTRL任务刷新一下，再来一下一点全选走，你是不是都选中了，哎，就是我们要的这么一个效果啊，好，那所以呢，这个东西没什么难的，唯一一个陌生的就是什么呢？就是如何让他们选中，选中我们也说了，用什么呀，用这个check的属性设置为true就OK了啊设置为true就OK了，好那这块呢，还是啊，一定要会熟练的使用我们这个文档去查一些这个属性，好那全选我们就说完了，那全部选是不是跟他一样，一不的是成选么？如果是我就给你改成false，如果是false我给你改成，哎，改成true，那提交呢。

我是不是把选中内容给它弹出来呀，哎，给它弹出来啊，其实下边这些功能呢，我们都可以去都可以做了啊，都可以做了，那接下来呢，先给你点时间，你们来自己的尝试去做一下，然后我们再讲啊，咱们再讲。