芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
8

YUI3:复选框 (checkbox) 的全选和反选

作者 芒果/分类 代码/发布于 2010-12-12 14:47

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

版权所有,转载请注明出处。
转载自 <a href="http://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

下面我简单说几句