30-解决方案

5.7.2　解决方案

编写一个 .toggleCheck() 插件，工作方式与jQuery核心中的 .toggle() 和 .toggleClass() 方法类似，可以用它设置、清除或者切换一个（或者一组）复选框：

//选中或者反选jQuery对象中选择的所有复选框元素,如果check参数省略,切换每个元素的选中状态
jQuery.fn.toggleCheck = function( check ) {
　　 return this.toggleAttr( 'checked', true, false, check );
};

然后可以这样启用一组按钮：

$('.toggleme').toggleCheck( true );

或者禁用它们：

$('.toggleme').toggleCheck( false );

也可以切换所有按钮的状态，每个都独立于其余按钮：

$('.toggleme').toggleCheck();

这个 .toggleCheck() 方法是在更通用的 .toggleAttr() 方法（可用于任何属性）的基础上构建的：

// 对于这个jQudery对象中选择的每个元素
//根据on的值将'name'属性设置为'onValue' 或 'offValue'
//如果'on'省略,独立地在'onValue' 和 'offValue'之间切换该属性
//如果选中的值('onValue' 或'offValue')为null或者undefined,删除该属性
jQuery.fn.toggleAttr = function( name, onValue, offValue, on ) {
　　 function set( $element, on ) {
　　　　　var value = on ? onValue : offValue;
　　　　　return value == null ?
　　　　　　　 $element.removeAttr( name ) :
　　　　　　　 $element.attr( name, value );
　　 }
　　 return on !== undefined ?
　　　　　set( this, on ) :
　　　　　this.each( function( i, element ) {
　　　　　　　 var $element = $(element);
　　　　　　　 set( $element, $element.attr(name) !== onValue );
　　　　　});
};

为什么要花这么多精力去构建这么通用的函数？现在我们可以几乎毫不费力地为其他属性编写相似的切换器．假定你需要和 .toggleCheck() 相同的功能，但是现在你所要禁用和启用的是输入控件。可以用一行代码写出一个 .toggleEnable() ：

//启用或者禁用这个jQuery对象选择的所有输入元素
//如果省略enable参数,切换所有元素的启用状态
jQuery.fn.toggleEnable = function( enable ) {
　　 return this.toggleAttr( 'disabled', false, true, enable );
};

请注意是如何按照 onValue 和 offValue 参数切换 true 和 false 属性值的，这种用法更容易说明元素的“启用”，代替 disabled 属性提供的不太直观的“禁用”功能。

另举一个例子，假定需要切换一个 foo 属性，该属性的“开启”状态是字符串值bar，“关闭”状态是删除该属性。这仍然可以用一行代码完成：

//添加或者删除属性foo="bar"
//如果省略add参数,切换该属性的存在
jQuery.fn.toggleFoo = function( add ) {
　　 return this.toggleAttr( 'foo', 'bar', null, add );
};