Friday, 3 October 2008

Access Radio Button with MooTools

在以前手工书写JavaScript,效验Form数据的时候,对Form中的Radio Button的处理,是使用“循环检测”来实现,显得很冗长。利用现有的JavaScript库,可以使代码大大简化。

假设,Form中有一组name为gender的Radio Button。其values,有male和female。用MooTools 1.2来写JavaScript Code,获取Radio Butten的状态,可以这样:

function getGender() {
var item = $(document.body).getElement('input[name=gender][checked]');

return item != null ? item.value : null;
}

如果对同一个页面上的多组Radio Button取值,比如对name的开始部分,同为bginfo_的多组Radio Button,使用$$():

  $$('input[name^=bginfo_][checked]').each( function(item, index) {
...
item.value;
...
} );

如果查阅jQuery中关于Selectors/checked的资料,能够看到$("input:checked")这样的写法。类似的,在MooTools中,就要写成$$('input[name=gender]:checked')。把':check'当成Selectors.Pseudo这样的写法,在FireFox和Opera中一切正常,但在Internet Explorer里面,就不能得到正确的结果。这个在MooTools文档中没有,大概正原于此吧。(注:更多的测试表明,$$('input[name=gender]:checked'),是能够在IE中工作的。不知道当初是怎么回事。)

设置Radio Butten的状态,则写成这样。没有兼容性的问题。

function setGender( gender ) {
$$('input[name=gender][value=' + gender + ']').setProperty('checked',true);
}

或者

function setGender( gender ) {
$(document.body).getElement('input[name=gender][value=' + gender + ']')
.setProperty('checked',true);
}

借助于MooTools的Selectors,对Radio Button的访问,现在简单了。

2 Comments:

At 17 July, 2009 14:32, Anonymous Anonymous said...

Thank you, very useful!

 
At 12 January, 2010 08:49, Anonymous Anonymous said...

this is exactly the functionality that Mootools was lacking directly, it saved me a great deal of time and effort! Thanks.

I only wished your posts had an English version, I find some of the other ones also very useful.

 

Post a Comment

<< Home