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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python序列操作之进阶篇
2016/12/08 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python如何基于redis实现ip代理池
2020/01/17 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
python的dict判断key是否存在的方法
2020/12/09 Python
技术比武方案
2014/05/19 职场文书
安全生产年活动总结
2014/08/29 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
入党函调证明材料
2014/12/24 职场文书
小学语文复习计划
2015/01/19 职场文书
授权委托书
2015/01/28 职场文书
道歉短信大全
2015/05/12 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang