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 tab切换(防止页面刷新)
May 23 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
详解puppeteer使用代理
Dec 27 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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实用函数分享之去除多余的0
2015/02/06 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
Python内置函数的用法实例教程
2014/09/08 Python
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python单元和文档测试实例详解
2019/04/11 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Django实现分页显示效果
2019/10/31 Python
python super()函数的基本使用
2020/09/10 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
个人找工作求职简历的自我评价
2013/10/20 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS