js核取方塊全選和取消全選效果
分享一段程式碼例項,它利用原生JavaScript實現了核取方塊的全選和不全選效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { padding: 0; margin: 0; } #_head { background-color: green; } #_head { text-align: center; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th,td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; text-align: center; } </style> </head> <body> <div id="wrapbox"> <table> <thead id="_head"> <tr> <th><input type="checkbox" id="qx"></th> <th>菜名</th> <th>廚師</th> <th>價格</th> </tr> </thead> <tbody id="_tbody"> <tr> <td><input type="checkbox"></td> <td>紅燒魚</td> <td>張一</td> <td>18</td> </tr> <tr> <td><input type="checkbox"></td> <td>紅燒肉</td> <td>張二</td> <td>18</td> </tr> <tr> <td><input type="checkbox"></td> <td>紅燒獅子頭</td> <td>張三</td> <td>18</td> </tr> <tr> <td><input type="checkbox"></td> <td>紅燒小青菜</td> <td>張四</td> <td>18</td> </tr> </tbody> </table> </div> <script> var qx = document.getElementById('qx'); var tbody = document.getElementById('_tbody') var inputs = tbody.getElementsByTagName("input"); qx.onclick = function() { for (var i = 0; i < inputs.length; i++) { var input = inputs[i] input.checked = qx.checked; } } for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.onclick = function() { var flag = true; for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.checked == false) { flag = false; } if (flag == true) { qx.checked = true; } else { qx.checked = false; } } } } </script> </body> </html>
相關文章
- JavaScript 核取方塊全選和取消全選效果JavaScript
- javascript checkbox核取方塊全選和取消全選效果JavaScript
- jQuery核取方塊全選和全不選效果jQuery
- javascript核取方塊全選和反選效果JavaScript
- 小程式核取方塊全選和全部取消
- checkbox核取方塊全選和取消全選例項程式碼
- jQuery核取方塊全選和全不選效果程式碼jQuery
- 原生js實現的核取方塊的全選和全不選效果JS
- JavaScript 核取方塊全選和全不選JavaScript
- JS實現核取方塊全選反選JS
- 使用jQuery做核取方塊的全選與取消jQuery
- javascript實現核取方塊全選和取消程式碼分析JavaScript
- 如何使用jQuery實現核取方塊的全選和取消jQuery
- JavaScript核取方塊全選和全不選詳解JavaScript
- jquery實現checkbox核取方塊全選效果jQuery
- jQuery核取方塊checkbox的全選和反選jQuery
- 核取方塊全選和全不選程式碼例項
- jQuery如何實現核取方塊全選和全不選jQuery
- JS如何實現對name是陣列的核取方塊的全選和反選以及取消選擇JS陣列
- checkbox 核取方塊全選程式碼
- javascript實現checkbox核取方塊全選和反選功能JavaScript
- 實現購物車 全選全不選,反選,單選-選滿時同步全選核取方塊--核取方塊checked屬性取值問題已解決
- js checkbox 全選 取消全選JS
- jquerycheckbox核取方塊多次點選判斷選中狀態,以及全選/取消的程式碼示例jQuery
- js如何實現點選li選中和取消裡面的核取方塊JS
- 選中和取消選中核取方塊實現背景變色和取消變色
- jquery table下的核取方塊選中、取消jQuery
- js實現checkbox核取方塊的反選效果JS
- 單選按鈕和核取方塊
- jQuery第二次無法全選checkbox核取方塊jQuery
- JS_多選框全選與取消全選的實現JS
- js 獲取被選中核取方塊的值JS
- js獲取選中checkbox核取方塊的值JS
- checkbox全選和取消全選完整程式碼例項
- vue checkbox 實現全選,取消全選Vue
- 純CSS模擬單選框和核取方塊CSS
- 基礎元件:單選開關和核取方塊元件
- JavaScript獲取選中checkbox核取方塊的選中值JavaScript