复选框的全选、全不选和反选

       如图：

         

       整个页面内容非常少只有五个复选框和三个按钮，如果嫌复选框少的话可以自己手动增加。

      HTML内容如下图，但要注意一点就是输入框的tyep属性的属性值一定要是checkbox，因为checkbox就是复选框的意思，在HTML里也是复选框，所以tyep的值一定要是checkbox，要不然它就不是一个复选框。

     

 

       接下来就是本篇文章的重点，JavaScript部分。

       按照惯例首先要获取到所有的复选框和三个按钮。

 

       首先是全选效果，为了对新人更友好一点，在这里直接说的直白一点，先给全选按钮绑定点击事件，然后就是全选按钮被点击时，通过for循环遍历所有的复选框，然后设置复选框的checked属性值为true也就是真，这样就完成了。（checked属性：设置或返回checked是否应被选中）

       接着是全不选效果，代码与全选效果基本相同，只不过改变了复选框的checked属性值为false，为全不选按钮绑定点击事件，通过for循环遍历所有的复选框，然后设置复选框的checked属性值为false就是假。

 

       最后是反选效果，反选效果的代码与全选和全不选按钮的代码基本相同，但在这里并没有直接设置复选框的checked属性值为具体的值，而是通过一元运算符来判断checked的属性值是true还是false。给反选按钮绑定点击事件，通过for循环遍历所有的复选框，最后通过一元运算符判断如果是true则设置为false，如果是false则设置为true。

       本篇文章中涉及到了事件、for循环和一元运算符，如果有不解之处可以看看小编之前的文章，也可以留言和私信。

       如有错误，请在评论区留言。