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脚本的性能的几个注意事项
Dec 22 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
jquery分页对象使用示例
Apr 01 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
js如何验证密码强度
Mar 18 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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在线代理转向代码
2012/05/05 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
python原始套接字编程示例分享
2014/02/21 Python
python flask实现分页效果
2017/06/27 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
小学美术教学反思
2014/02/01 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
质检部经理岗位职责
2014/02/19 职场文书
会计学自荐信
2014/06/03 职场文书
作风转变心得体会
2014/09/02 职场文书
稽核岗位职责范本
2015/04/13 职场文书
小学语文教学反思范文
2016/03/03 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
mysql的数据压缩性能对比详情
2021/11/07 MySQL
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python