JavaScript列表框listbox全选和反选的实现方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 用JavaScript实现类似于ListBox功能示例代码

    JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据: 复制代码 代码如下: <span style="font-size:14px;">{ "Table": [ { "Id": 3, "Type": "X", "Content": &

  • JS ListBox的简单功能实现代码

    JS ListBox的简单功能实现代码

    页面效果如下:代码也贴出来跟大家分享: 美元/英镑 美元/港币 美元/新加坡元 美元/日元 美元/加拿大元 美元/欧元 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js 获取Listbox选择的值的代码

    复制代码 代码如下: <script type="text/javascript"> function GetValue() { var strlist = document.getElementById("ListBox1");//获取Listbox var str= ""; //遍历Listbox,取得选中项的值 if (strlist.options.length > 0) { for (var i = 0; i <

  • JavaScript控制两个列表框listbox左右交换数据的方法

    本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法.分享给大家供大家参考.具体分析如下: 这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动 复制代码 代码如下: function listbox_moveacross(sourceID, destID) {     var src = document.getElementById(sourceID);     var dest = document.getEl

  • 基于javascript实现listbox左右移动

    基于javascript实现listbox左右移动

    本文实例讲解了javascript实现listbox左右移动的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>listbox左右移动</title> </head> <body> &

  • javascript实现listbox左右移动实现代码

    javascript实现listbox左右移动实现代码

    1. html部分: 复制代码 代码如下: <table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460" align="left" borderColorLight="#000000" border="1"> <tr bgColor="#cccccc

  • 使用javascript实现ListBox左右全选,单选,多选,全请

    复制代码 代码如下: <html><head>    <meta http-equiv="Content-Type " content="text/html;   charset=gb2312 ">    <title>list测试</title></head><body>    <div style="font-size: 10pt;">      

  • JavaScript如何从listbox里同时删除多个项目

    要从列表框同时删除多个项目,我们不能从上到下的删除,因为上面的项目每删除一个,下面的项目的索引号就会变化,所以只能从下向上删除,这样就不会出现索引号乱变的问题了. html代码 复制代码 代码如下: <table> <tr> <td align="center"> <select id="lsbox" name="lsbox" size="10" multiple> <op

  • JavaScript控制listbox列表框的项目上下移动的方法

    本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以控制listbox内的元素向上或者向下移动,这个功能非常有用.下面是详细的代码 复制代码 代码如下: function listbox_move(listID, direction) {     var listbox = document.getElementById(listID);     var selIndex = listbox.selectedInd

  • JavaScript列表框listbox全选和反选的实现方法

    本文实例讲述了JavaScript列表框listbox全选和反选的实现方法.分享给大家供大家参考.具体分析如下: 通过JS代码对列表框进行全选和反选是经常要操作的,非常具有实用价值. function listboxSelectDeselect(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) {

  • 纯javascript实现选择框的全选与反选功能

    HTML部分 <div id="wrap_input_box" > <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <i

  • JavaScript实现表单全选或反选效果

    JavaScript实现表单全选或反选效果

    本文实例为大家分享了JavaScript实现表单全选或反选的具体代码,供大家参考,具体内容如下 表单中常常会用到checkbox复选框,通过复选框做出的列表全选或全不选的效果也是很常见的,比如购物车的商品列表,所以本篇也是对这一种常见功能的选择效果及其底层的实现思路及代码进行介绍.演示与分析,下面上JS代码: <script> // 表单的全选与全不选案例:注:checkbox复选框的checked属性值为true则为选中状态,为false则为未选中状态 var j_cbAll = docum

  • JavaScript实现页面一键全选或反选

    JavaScript实现页面一键全选或反选

    本文实例为大家分享了JavaScript实现页面一键全选或反选的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>         <style type="text/css">             .hobby {  

  • javascript实现简单的全选和反选功能

    javascript实现简单的全选和反选功能

    本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="butt

  • vue 全选与反选的实现方法(无Bug 新手看过来)

    我就废话不多说,直接上代码吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div style="padding-left: 20px

  • javascript实现checkBox的全选，反选与赋值

    我们平时在做项目的时候,经常会遇到需要实现实现checkBox的全选,反选与赋值的情况,网上也有许多的范例,这里给大家分享的是本人常用的方法,推荐给大家. 复制代码 代码如下: //js 数值是否在数组中 Array.prototype.in_array = function(e){ for(i=0;i<this.length;i++){ if(this[i] == e) return true; } return false; } //js数组index Array.prototype.fin

  • jQuery实现复选框的全选和反选

    话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <label for="apple">苹果</label> <input

  • jquery复选框CHECKBOX全选、反选

    使用方法:我们先把下面的JS保存为有个文件,到时候调用,淡然你也可以直接写在页面内,推荐使用前者,方便重用: 复制代码 代码如下: (function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ groupSelector:null, groupName:'group_name', enabledOnly:false },options || {}); var ctrl_box=thi

  • js html css实现复选框全选与反选

    本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 <html> <head> <title>html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content=&quo

随机推荐