js multiple全选与取消全选实现代码

最新推荐文章于 2020-06-01 22:17:23 发布

weixin_30555515

最新推荐文章于 2020-06-01 22:17:23 发布

阅读量177

点赞数

原文链接：http://www.cnblogs.com/vera/archive/2012/12/05/2802948.html

版权

本文介绍了一种使用JavaScript实现选择框全选功能的方法，包括利用children()和attr()函数，以及HTML和CSS的基本应用。通过实例演示了如何在网页中快速实现全选操作，对于前端开发者来说是一个实用的技巧。

摘要由CSDN通过智能技术生成

代码如下: $("select").change(function(){ var n = $(this).children().length; var obj; var i = 1; $(this).children().each(function(){ if(i == n) { alert($(this).text()); } i++; }); });

综合以上二法，本人轻易得出了自己想要的效果，如下：复制代码代码如下: function selectall() { $("select").children().each(function(){$(this).attr("selected","selected")}) }

分别用到了 children()和$(this).attr("selected","selected") 一个js用法复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript">  </script> </head> <body> <select id="CourseList" name="CourseList" multiple="multiple" size="20" style="width:230px;"> <option value="003" >(003) 消费者行为与销售心理</option> <option value="004" >(004) 产品策划与市场推广</option> <option value="005" >(005) 品牌定位与广告原理</option> </select> <input type="button" οnclick="selectAll()" value="全选"> </form> </body> </html>

转载于:https://www.cnblogs.com/vera/archive/2012/12/05/2802948.html