23-解决方案

10.5.2　解决方案

用 class 属性和 :checkbox 选择器直接找到切换开关。然后循环读取每个找到的切换开关，用 .siblings() 确定相关联的复选框，并附加 change 事件监听器：

//找到字段集中的"Select All"切换开关,循环读取找到的所有开关
$('fieldset .toggle:checkbox').each(function(){
　　 //以下代码使用多次,将其存储起来获得更高的效率
　　 // 切换开关复选框
　　 var $toggle = $(this);
　　 // 其他复选框
　　 var $checkboxes = $toggle.siblings('input:checkbox');
　　 // 监听切换开关的change事件
　　 $toggle.change(function(){
　　　　　if ( this.checked ) {
　　　　　　　 // 如果选中,选择所有复选框
　　　　　　　 $checkboxes.attr('checked','checked');
　　　　　} else {
　　　　　　　 //如果没有选中,反选所有复选框
　　　　　　　 $checkboxes.removeAttr('checked');
　　　　　}
　　 });
　　 //监听每个单独复选框(不包含切换开关)的change事件
　　 $checkboxes.change(function(){
　　　　　if ( this.checked ) {
　　　　　　　 //如果复选框选中而其他复选框都选中,则选中切换开关
　　　　　　　 if ( $checkboxes.length == $checkboxes.filter(':checked').length ) {
　　　　　　　　　　$toggle.attr('checked','checked');
　　　　　　　 }
　　　　　} else {
　　　　　　　 //如果复选框没有选中,反选切换开关
　　　　　　　 $toggle.removeAttr('checked');
　　　　　}
　　 }).eq(0).trigger('change'); //然后仅触发第一个复选框的change事件
}); //结束each()