芒果小站

/* 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 条群众意见

  1. Mr.Think /2010-12-12 17:13

    哈.. YUI 很强大啊.. 最近在看官方的 EXAMPLE 练习… 回应

    #1
  2. 测试评论 /2010-12-13 10:18

    测试评论 回应

    #2
  3. Firm /2010-12-13 15:55

    依样画葫芦试试看。。 回应

    #3
  4. 哲哲 /2010-12-14 10:02

    ··这个不懂···唉· 回应

    #4
  5. Jutoy /2010-12-15 16:35

    高科技,不懂…… 回应

    #5
  6. Green Wang /2011-01-17 18:34

    .checkbox 和 #select 是自己定义的吧? 回应

    #6
  7. 芒果Green Wang/2011-01-17 22:10

    嗯,是的! 回应

    #7
  8. YUI3:复选框 (checkbox) 的全选和反选 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /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 [...] 回应

    #8

我简单说几句

随机推荐

最新评论