原生js實現的核取方塊的全選和全不選效果
使用jquery實現核取方塊的全選和全部選效果非常的簡單,這裡就不介紹了,具體可以參閱jQuery checkbox核取方塊全選和全不選效果一章節,下面介紹一下如何使用原生javascript實現此效果,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{font-size:12px;} ul{list-style:none} </style> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById("box"); var flag=document.getElementById("flag"); var checkAll=document.getElementById("checkAll"); checks=box.getElementsByTagName("input"); checkAll.onclick=function(){ if(this.checked){ for(var i=0;i<checks.length;i++){ checks[i].checked=true; } flag.innerHTML="取消"; }else{ for(var i=0;i<checks.length;i++){ checks[i].checked = false; } flag.innerHTML="全選"; } } } </script> </head> <body > <ul id="box"> <li><input type="checkbox">螞蟻部落一</li> <li><input type="checkbox">螞蟻部落二</li> <li><input type="checkbox">螞蟻部落三</li> <li><input type="checkbox">螞蟻部落四</li> </ul> <input type="checkbox" id="checkAll"><span id="flag">全選</span> </body> </html>
以上程式碼實現了全選和全不選效果,程式碼非常的簡單,下面做一下簡單的介紹。
一.實現原理:
當點選底部核取方塊的時候,程式碼首先會判斷此核取方塊是否被選中,如果被選中,說明要全選,然後使用for迴圈遍歷整個核取方塊,將核取方塊設定為選中狀態,並且將span中的文字設定為取消,取消全選也是一樣的道理,這裡就不多介紹了。
二.相關閱讀:
1.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。
2.onclick事件可以參閱javascript click 事件一章節。
相關文章
- jQuery核取方塊全選和全不選效果jQuery
- jQuery如何實現核取方塊全選和全不選jQuery
- jQuery核取方塊全選和全不選效果程式碼jQuery
- JavaScript 核取方塊全選和全不選JavaScript
- js核取方塊全選和取消全選效果JS
- JavaScript核取方塊全選和全不選詳解JavaScript
- JS實現核取方塊全選反選JS
- 核取方塊全選和全不選程式碼例項
- JavaScript 核取方塊全選和取消全選效果JavaScript
- javascript核取方塊全選和反選效果JavaScript
- jquery實現checkbox核取方塊全選效果jQuery
- js實現checkbox核取方塊的反選效果JS
- javascript checkbox核取方塊全選和取消全選效果JavaScript
- 實現購物車 全選全不選,反選,單選-選滿時同步全選核取方塊--核取方塊checked屬性取值問題已解決
- 如何使用jQuery實現核取方塊的全選和取消jQuery
- javascript實現checkbox核取方塊全選和反選功能JavaScript
- jQuery核取方塊checkbox的全選和反選jQuery
- JS如何實現對name是陣列的核取方塊的全選和反選以及取消選擇JS陣列
- javascript實現核取方塊全選和取消程式碼分析JavaScript
- 小程式核取方塊全選和全部取消
- checkbox核取方塊全選和取消全選例項程式碼
- js如何實現點選li選中和取消裡面的核取方塊JS
- js 獲取被選中核取方塊的值JS
- checkbox 核取方塊全選程式碼
- 使用jQuery做核取方塊的全選與取消jQuery
- 原生js如何判斷一個核取方塊是否選中JS
- js獲取選中checkbox核取方塊的值JS
- JavaScript checkbox全選和全不選效果JavaScript
- 單選按鈕和核取方塊
- 原生js實現的點選彈出螢幕居中對話方塊效果JS
- 如何實現點選文字也能夠選中核取方塊
- 選中和取消選中核取方塊實現背景變色和取消變色
- JavaScript獲取選中checkbox核取方塊的選中值JavaScript
- checbox核取方塊實現radio單選框的單選功能
- 簡單的js反選,全選,全不選JS
- jQuery實現的限制checkbox核取方塊選中的數目jQuery
- jquery實現的判斷checkbox核取方塊是否被選中jQuery
- jquery table下的核取方塊選中、取消jQuery