JavaScript列表框listbox全選和反選的實現(xiàn)方法

更新時間：2015年03月18日 12:02:31 作者：上大王

這篇文章主要介紹了JavaScript列表框listbox全選和反選的實現(xiàn)方法,涉及javascript操作列表框listbox的技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了JavaScript列表框listbox全選和反選的實現(xiàn)方法。分享給大家供大家參考。具體分析如下：

通過JS代碼對列表框進(jìn)行全選和反選是經(jīng)常要操作的，非常具有實用價值。

function listboxSelectDeselect(listID, isSelect) {
  var listbox = document.getElementById(listID);
  for(var count=0; count < listbox.options.length; count++) {
      listbox.options[count].selected = isSelect;
  }
}

下面是一個詳細(xì)使用范例

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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript聲明變量名的語法規(guī)則
這篇文章主要給大家簡單介紹了JavaScript聲明變量名的語法規(guī)則，非常有助于大家學(xué)習(xí)javascript，有需要的小伙伴可以參考下。
2015-07-07
JS的location.href跳出框架打開新頁面的方法
登錄頁面在框架內(nèi)打開，想讓它直接跳出框架打開（這里不是打開新窗口），終于在網(wǎng)上找到了辦法，下面分享給大家
2014-09-09
使用純JS實現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)
最近做了一個用js實現(xiàn)鼠標(biāo)拖拽多選的功能,于是整理了一下思路,寫了一個小demo,下面這篇文章主要給大家介紹了關(guān)于如何使用純JS實現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)的相關(guān)資料,需要的朋友可以參考下
2022-05-05
echarts實現(xiàn)晶體球面投影的實例教程
這篇文章主要給大家介紹了關(guān)于echarts實現(xiàn)晶體球面投影的相關(guān)資料，文中介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
原生js圖片輪播效果實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了基于原生js實現(xiàn)圖片輪播效果的具體代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
JavaScript計算出兩個數(shù)的差值
這篇文章主要為大家詳細(xì)介紹了JavaScript計算出兩個數(shù)的差值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
讀取table內(nèi)容的javascript代碼
主要用到了js的dom操作，用到了rows 集合。
2009-12-12
詳解Typescript中奇怪的賦值操作
這篇文章主要來和大家討論一下typescript中一些奇怪的賦值語句,探索其背后原因,更深入的了解typescript作為一個結(jié)構(gòu)化系統(tǒng)的特性,感興趣的可以了解下
2024-02-02
旺旺在線客服代碼旺旺客服代碼生成器
很多朋友想在網(wǎng)站上插入自己的阿里旺旺在線聯(lián)系圖片，就像是和QQ一樣，小編為大家詳細(xì)講解了旺旺在線客服代碼以及旺旺客服代碼生成器，希望能夠幫助到大家。
2018-01-01
普通js文件里面如何訪問vue實例this指針
這篇文章主要介紹了普通js文件里面如何訪問vue實例this指針，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08