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 相关文章推荐
jQuery替换字符串(实例代码)
Nov 13 Javascript
javascript类型转换示例
Apr 29 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Python Socket传输文件示例
2017/01/16 Python
Python变量和数据类型详解
2017/02/15 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Flask配置Cors跨域的实现
2019/07/12 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
职业生涯规划书怎么写?
2014/09/14 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
logback如何自定义日志存储
2021/08/30 Java/Android
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript