复选框的全选和取消全选效果

  首先，先来实现复选框的全选功能，我们做如下界面

  

实列代码：

  

全选的功能，让最上边的复选框点上，下边子选框全部被选中，当然点击触发的是onclick时间 那么就写如下代码来判断，让下边的子选框被选中：

  

当点击最上边的那个fathercheckbox时 ，会触发function时间，在这个函数中利用for循环让所有的 son checkbox等于  复选框的box  ,这样就可以让所有子选框被选中。

接下来要实现点击反选的功能：

      当前页面状态为：

                  

3和4号子选框被选中，当我们点击反选按钮的时候这两个子选框会取消选中，其他的子选框会被选中，那么这也是触发  反选这个按钮的onclick事件， 首先在反选这个按钮上加上  id="btn"这个属性 ，然后可以写如下代码：

    

道理其实很简单，就是当点击反选按钮式，让所有的子选框 的状态变为和原来相反的就可以了。

这样点击反选时就能实现反选的效果了。

接下来再实现两个效果，就是全选中的状态时，子选框去掉一个 父选框也被取消（既不是全选状态，父选框就取消选中） ，当为全选状态时 父选框自动选上。

  首先我们要在每一个子选框上加上一个函数  check()

      

然后 在js代码中加上 check()函数，在check函数中加入如下代码：

   

   判断下是否有子选框未被选中，或者是子选框全部选中，然后对父选框做出处理。就可以达到预期的效果。