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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
详解ES6 系列之异步处理实战
Oct 26 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
js实现计算器功能
2020/08/10 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python 中文乱码问题深入分析
2011/03/13 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python 使用office365邮箱的示例
2020/10/29 Python
护理专业优质毕业生自荐书
2014/01/31 职场文书
人事专员的岗位职责
2014/03/01 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
企业培训简报范文
2015/07/20 职场文书
宾馆客房管理制度
2015/08/06 职场文书