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 相关文章推荐
克隆javascript对象的三个方法小结
Jan 12 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python opencv实现图像边缘检测
2019/04/29 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
蛋白质世界:Protein World
2017/11/23 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
职工运动会邀请函
2014/01/19 职场文书
个人授权委托书样本
2014/09/13 职场文书
学校联谊协议书
2014/09/16 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js