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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 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伪静态的实现详细介绍
2013/04/28 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Python列表切片用法示例
2017/04/19 Python
python监控键盘输入实例代码
2018/02/09 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
物业管理求职自荐信
2013/09/25 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
《称象》教学反思
2014/04/25 职场文书
团日活动总结书格式
2014/05/08 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android