JavaScript列表框listbox全选和反选的实现方法


Posted in Javascript onMarch 18, 2015

本文实例讲述了JavaScript列表框listbox全选和反选的实现方法。分享给大家供大家参考。具体分析如下:

通过JS代码对列表框进行全选和反选是经常要操作的,非常具有实用价值。

function listboxSelectDeselect(listID, isSelect) {
  var listbox = document.getElementById(listID);
  for(var count=0; count < listbox.options.length; count++) {
      listbox.options[count].selected = isSelect;
  }
}

下面是一个详细使用范例

Click below buttons to select or deselect all options from select box
<br>
  <select id="lsbox" name="lsbox" size="10" multiple="">
    <option value="1">India</option>
    <option value="2">United States</option>
    <option value="3">China</option>
    <option value="4">Italy</option>
    <option value="5">Germany</option>
    <option value="6">Canada</option>
    <option value="7">France</option>
    <option value="8">United Kingdom</option>
  </select> <br>
<button onclick="listboxSelectDeselect('lsbox', true);">Select All</button>
<button onclick="listboxSelectDeselect('lsbox', false);">Deselect All</button>
<script>
function listboxSelectDeselect(listID, isSelect) {
  var listbox = document.getElementById(listID);
  for(var count=0; count < listbox.options.length; count++) {
      listbox.options[count].selected = isSelect;
  }
}
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery动画与特效详解
Feb 01 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Vue如何实现组件间通信
May 15 Vue.js
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 #Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 #Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 #Javascript
jQuery实现列表的全选功能
Mar 18 #Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 #Javascript
JavaScript移除数组内重复元素的方法
Mar 18 #Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 #Javascript
You might like
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
OpenCV 边缘检测
2019/07/10 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
元宵晚会主持词
2014/03/25 职场文书
2014年外联部工作总结
2014/11/17 职场文书
司机岗位职责
2015/02/04 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
招商银行收入证明
2015/06/17 职场文书
红楼梦读书笔记
2015/06/25 职场文书
大学学生会竞选稿
2015/11/19 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers