個人js學習例項-點選按鈕實現全選與反選，及封裝函式呼叫前後
阿新 • • 發佈：2018-12-24
原始：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>全選和反選</title> <!--引入bootstrap--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid text-center" style="margin-top: 50px"> <button class="btn btn-success">全選</button> <button class="btn btn-default">取消</button> <button class="btn btn-danger">反選</button> </div> <div id="bottom" class="container-fluid text-center" style="margin-top: 10px;"> <ul class="list-unstyled"> <li>德瑪西亞：<input type="checkbox"></li> <li>德瑪西亞：<input type="checkbox"></li> <li>德瑪西亞：<input type="checkbox"></li> <li>德瑪西亞：<input type="checkbox"></li> <li>德瑪西亞：<input type="checkbox"></li> <li>德瑪西亞：<input type="checkbox"></li> </ul> </div> <script> window.onload = function () { //獲取三個button按鈕賦給陣列btns var btns = document.getElementsByTagName("button"); // 將id為bottom的div裡的input全部獲取賦給陣列inps var inps = document.getElementById("bottom").getElementsByTagName("input"); //第一個按鈕全選 btns[0].onclick = function () { //迴圈ins陣列 for(var i = 0; i<inps.length; i++){ // 選中表單 inps[i].checked = true; } } //第2個按鈕取消全選 btns[1].onclick = function () { for(var i = 0; i<inps.length; i++){ // 選中表單 inps[i].checked = false; } } //第3個按鈕反選 btns[2].onclick = function () { for(var i = 0; i<inps.length; i++){ // 選中表單，利用for迴圈遍歷，如果是input的checked的值是false，賦給true值，如果是input的checked的值是true，賦給false值 if(inps[i].checked == false){ inps[i].checked = true; }else { inps[i].checked = false; } } } } </script> </body> </html>
封裝函式後：
<script> window.onload = function () { //獲取三個button按鈕賦給陣列btns var btns = document.getElementsByTagName("button"); // 將id為bottom的div裡的input全部獲取賦給陣列inps var inps = document.getElementById("bottom").getElementsByTagName("input"); // 建立封裝函式all函式等待呼叫，引數flag指的是後面呼叫時的給的布林值 function all(flag) { // 遍歷input的陣列inps for(var i = 0; i<inps.length; i++){ // 將引數flag的值賦給便利到的inps[i] inps[i].checked = flag; } } btns[0].onclick = function () { //呼叫函式all，將布林值true賦給形參flag all(true); }; btns[1].onclick = function () { //呼叫函式all，將布林值false賦給形參flag all(false); }; //第3個按鈕反選 btns[2].onclick = function () { for(var i = 0; i<inps.length; i++){ // 利用三目運算，如果inps[i].checked的值是true，則執行第一個inps[i].checked = false，如果不是執行第二個inps[i].checked = true inps[i].checked == true?inps[i].checked = false:inps[i].checked = true; } } } </script>