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 相关文章推荐
12种不宜使用的Javascript语法整理
Nov 04 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
js的延迟执行问题分析
Jun 23 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
浅谈Vue的computed计算属性
Mar 21 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代码
2006/12/06 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
为你总结一些php系统类函数
2015/10/21 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
批处理与python代码混合编程的方法
2016/05/19 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
python自动化发送邮件实例讲解
2021/01/04 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
戴森英国官网:Dyson英国
2019/05/07 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
爱情保证书范文
2014/02/01 职场文书
网络书店创业计划书
2014/02/07 职场文书
爱护草坪标语
2014/06/24 职场文书
医德医魂心得体会
2014/09/11 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
关于长城的导游词
2015/01/30 职场文书
教师读书笔记
2015/06/29 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
孩子满月酒答谢词
2015/09/30 职场文书