全选功能的实现主要分两步:
1. 点击全选框选中所有选择框.
2. 当所有选择框都被选中时, 勾选全选框.
详细思路:
1. 点击全选框选中所有选择框:
给全选框绑定一个值, 然后添加 change 时间, 当全选框的值改变时给所有选择框的值赋与全选框的值.
2. 当所有选择框都被选中时, 选中全选框:
给所有选择框都添加 change 事件, 当某个选择框的值改变时, 检查所有选择框的状态: 只要有一个选择框没被选中, 则把全选框的值设为 false, 否则设为 true.
注意: 两步的关键区别在于, 一个是通过事件改变, 一个是通过值改变, 这样可以避免陷入死循环. 若是都通过监听事件改变或监听值改变, 会陷入死循环.
基础知识: 选择框的值是 input 标签的 checked 属性, 当 type 为 radio 或 checkbox 时有效.
来源: http://www.bubuko.com/infodetail-3065572.html