/* 336x280*/
看 Mr.Think 童鞋写了一篇 实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版),俺也来分享一份 YUI3 版~灰常简陋,用到了一个 Y.Array.indexOf 方法,比较有意思。
YUI3 代码:
YUI().use('node', function(Y){
var checkbox = Y.all('.checkbox'),
select = Y.one('#select'),
checkboxControl = function(){
Y.Array.indexOf(checkbox.get('checked'), false) < 0 ? select.set('checked', true) : select.set('checked', false);
},
selectControl = function(){
select.get('checked') ? checkbox.set('checked', true) : checkbox.set('checked', false);
};
checkbox.on('click', checkboxControl);
select.on('click', selectControl);
});
值得注意的是,使用 get 方法操作获取 NodeList 的某个属性,能直接返回一个数组,很强悍!
具体请查看演示:checkbox_select.html
/* 336x280*/
版权所有,转载请注明出处。
转载自 <a href="http://www.mangguo.org/yui3-checkbox-select/" title="YUI3:复选框 (checkbox) 的全选和反选" rel="bookmark">YUI3:复选框 (checkbox) 的全选和反选 | 芒果小站</a>
已经有 8 条群众意见
- Mr.Think
#1/2010-12-12 17:13哈.. YUI 很强大啊.. 最近在看官方的 EXAMPLE 练习… 回应
- 测试评论
#2/2010-12-13 10:18测试评论 回应
- Firm
#3/2010-12-13 15:55依样画葫芦试试看。。 回应
- 哲哲
#4/2010-12-14 10:02··这个不懂···唉· 回应
- Jutoy
#5/2010-12-15 16:35高科技,不懂…… 回应
- Green Wang
#6/2011-01-17 18:34.checkbox 和 #select 是自己定义的吧? 回应
- 芒果 对 说
#7/2011-01-17 22:10嗯,是的! 回应
- YUI3:复选框 (checkbox) 的全选和反选 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广
#8/2011-05-04 19:53[...] 转载至:YUI3:复选框 (checkbox) 的全选和反选 | 芒果小站 分类: javascript, 其它 标签: 临时 使用 jQuery 操作 DOM:10+ 有用的代码片段5 个简单实用的 CSS 属性纯 CSS 实现文本渐变效果CSS 的外联,内联和嵌入芒果教你清除浮动CSS 有序列表 ol 和无序列表 ul用 JavaScript 实现 HTML 代码运行框你真的认识 window.location 吗?使用 <hr> 标签创建水平分隔线用 CSS 实现段落首行缩进 评论 (0) Trackbacks (0) 发表评论 Trackback [...] 回应
我简单说几句