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 调试器简介
Feb 21 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
jquery自定义表格样式
Nov 23 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
vue实现井字棋游戏
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自动判断字符集并转码的详解
2013/06/26 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
33道php常见面试题及答案
2015/07/06 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
PHP7新特性简述
2017/06/11 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
python中字典增加和删除使用方法
2020/09/30 Python
python基于opencv 实现图像时钟
2021/01/04 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
上班时间打瞌睡检讨书
2014/09/26 职场文书
升职自荐信范文
2015/03/27 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
被委托人身份证明
2015/08/07 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript