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中使用inline函数的问题
Mar 08 Javascript
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
js中!和!!的区别与用法
May 09 Javascript
element多个表单校验的实现
May 27 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命令行脚本接收传入参数的三种方式
2014/08/20 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python 学习笔记
2008/12/27 Python
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python如何判断IP地址合法性
2020/04/05 Python
python使用列表的最佳方案
2020/08/12 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
结婚典礼证婚词
2014/01/08 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
工作证明书
2015/06/15 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
高二语文教学反思
2016/02/16 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers