十九，DOM操作练习（图片切换，全选练习 this）

一，实现效果要求如下：

表现和样式如下：

实现逻辑：

1.分别为两个按钮绑定单击事件，

切换图片就是要修改img的src属性，我们需要切换的图片有多张，所以我们需要一个数组来保存图片路径。

       创建一个变量index来保存当前图片的索引，

       imgs.src = imgArr[index];

当点击下一张图片时index++,但是需要注意的是，当自增到数组最大的索引时就没有图片了。所以我们需要判断，index的值。当Index自增时，需要与数组的长度-1进行比较，大于长度-1则让index=0，从新从第一张开始；同理当index的值小于0时，让index的值为数组长度-1。

2.添加提示文字

一共有？“数组的长度”张图片，当前第.?“(index+1)”张,且需要用（）括起来，防止+进行拼接操作。

JS实现代码如下：

二，实现效果要求如下：

实现逻辑如下：

1.全选，全不选

点击按钮后，所有的多选框都被选中。

获取所有的多选框，通过name来获取，                    items[i].checked = true;

2.反选

 需要先判断多选框的状态，如果checkAllBox.checked = true;则证明多选框是选中状态。可以对代码进行优化

3.提交按钮

点击提交后将选中多选框的value值弹出。先判断多选框是否选中

4.全选/全不选的多选框

业务逻辑：当它选中时，下面所有的多选框都选中；当它取消时下面的多选框也都取消。

绑定函数，首先需要确定下面多选框的状态，判断是否选中。 items[i].checked = checkAllBox.checked;根据上面的状态来判断下面的状态。

事件处理函数里面有this，那这里的this 是谁呢？

this指向的情况:

1.当以函数的形式调用时，this指向window

2.当以方法的形式调研时，谁调用this就是谁

3.当以构造函数形式调用时，this就是新创建的那个对象

4.在事件响应函数中，事件是给谁绑定的，this就是谁

这里的this 是checkAllBox的属性，console.log(this === checkAllBox); //true。

此时的全选/全不选还存在很多的问题。

如果下面的多选框全部选中，则checkAllBox也应该选中；如果下面的多选框全部不选中，则checkAllBox也应该不选中。

什么时候来判断呢？当然是在点击下面的每一个多选框时都要判断，所有需要为每一个多选框绑定一个函数。

 如何来判断？
                         * 我们不好判断是否是全部选中
                         * 但是我们很容易判断是否没全部选中
                         * 跟质数的判断一样
                         * 只要有一个没选中就不是全选

当我们要点击下面的多选框时就先让上面的选中，然后再根据for循环里面的结果来判断是否全选或取消。一旦进行判断循环就没有必要进行了，所有代码优化加上break。

此时反选还存在问题。

 这里不能break,因为上面取反的循环不能中断