初学者全面接触学习jquery(译文)(7)

多选框插件

如果将jquery用于form，那么碰到radio和checkboxes时，可能会这么处理

1. $("input[@type='checkbox']".each(function() {
2.    this.checked = true;
3.    this.checked = false; // or, to uncheck
4.    this.checked = !this.checked; // or, to toggle
5.  });

如果嫌麻烦的话，可以写个插件来处理each

1. jQuery.fn.check = function() {
2.    return this.each(function() {
3.      this.checked = true;
4.    });
5.  };

现在就可以这么使用这个插件了

1. $("input[@type='checkbox']".check();

当然也可以为uncheck() 和 toggleCheck()写个插件，但在这里我们作为参数选项来达到这个目的。

1. jQuery.fn.check = function(mode {
2.    // if mode is undefined, use 'on' as default
3.    var mode = mode || 'on';
4.  
5.    return this.each(function() {
6.      switch(mode {
7.        case 'on':
8.          this.checked = true;
9.          break;
10.        case 'off':
11.          this.checked = false;
12.          break;
13.        case 'toggle':
14.          this.checked = !this.checked;
15.          break;
16.      }
17.    });
18.  };

这样默认就是on，调用的话，就可以这样

1. $("input[@type='checkbox']".check();
2. $("input[@type='checkbox']".check('on';
3. $("input[@type='checkbox']".check('off';
4. $("input[@type='checkbox']".check('toggle';

可选设置

1. jQuery.fn.rateMe = function(options {
2.    // instead of selecting a static container with
3.    // $("#rating"), we now use the jQuery context
4.    var container = this;
5.  
6.    var settings = jQuery.extend({
7.      url: "rate.php"
8.      // put more defaults here
9.    }, options;
10.  
11.    // ... rest of the code ...
12.  
13.    // if possible, return "this" to not break the chain
14.    return this;
15.  });

调用的时候

1. $(....rateMe({ url: "test.php" });

下一步

如果想更加熟悉或者开发js项目，可以考虑一下firefox的firebug插件