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 判断页面元素是否存在的代码
Aug 14 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
vue实现div拖拽互换位置
Jul 29 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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中利用explode函数分割字符串到数组
2014/02/08 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
js get和post请求实现代码解析
2020/02/06 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python 默认参数问题的陷阱
2016/02/29 Python
如何在python中使用selenium的示例
2017/12/26 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
自主招生自荐信格式
2013/12/03 职场文书
社区安全检查制度
2014/02/03 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL