資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中檢查複選框是否被選中？
在本教程中，我們將學習如何檢查JavaScript 中的複選框是否被選中。複選框是 HTML 中的輸入型別，用作選擇框。屬於同一組的單選按鈕僅允許使用者選擇一個值。但是，屬於同一組的複選框允許使用者選擇多個值。
此外，您自己腦海中也可能有許多複選框的用途。HTML 可以將複選框新增到網頁中，但要向複選框新增行為，我們必須使用 JavaScript。程式設計師可以根據複選框是否被選中向複選框新增不同的行為。
在這裡，我們將學習檢查單個和多個複選框是否被選中。
檢查單個複選框是否被選中
在本節中，我們將學習如何檢查複選框是否被選中。在 JavaScript 中，我們可以使用 id、類或標籤名稱訪問複選框元素，並將'.checked' 應用於該元素，它根據複選框是否被選中返回 true 或 false。
語法
使用者可以按照以下語法檢查單個複選框是否被選中。
let checkbox = document.getElementById("checkbox_id");
let checkbox.checked; // it returns Boolean value
示例
在下面的示例中，我們建立了複選框。此外，我們還向複選框添加了事件監聽器。當用戶更改複選框的值時，將呼叫事件監聽器。在事件監聽器中，我們將檢查複選框是否被選中。如果複選框被選中，我們將向 div 顯示一些文字，否則我們將清空 div。
<html> <head> <title>Check whether the Checkbox is checked or not</title> </head> <body> <h2>Check whether the Checkbox is checked or not using <i> .checked attribute </i></h2> <h4>Check the below checkbox to see the text div</h4> <input type = "checkbox" id = "checkbox"> <div id = "text"> </div> <script> let checkbox = document.getElementById("checkbox"); checkbox.addEventListener( "change", () => { if ( checkbox.checked ) { text.innerHTML = " Check box is checked. "; } else { text.innerHTML = ""; } }); </script> </body> </html>
在上面的輸出中，使用者可以看到，當他們選中複選框時，它會顯示訊息“複選框已選中”。當他們取消選中複選框時，它不顯示任何內容。
檢查是否選中了多個複選框
向單個複選框新增行為很簡單。在許多網站上，您都看到過，當您看到彈出視窗以接受條款和條件時，它有多個複選框，當您選中所有複選框時，才會啟用“接受”按鈕。
在這裡，我們將做同樣的事情。我們將建立多個複選框並檢查所有複選框是否被選中，並根據此啟用按鈕。
語法
訪問所有複選框和按鈕
let checkbox = document.getElementsByName( "checkbox" ); let button = document.getElementById( "btn" );
向每個複選框新增事件監聽器。
for ( let i = 0; i < checkbox.length; i++ ) { checkbox[i].addEventListener( "change", () => { }); }
在事件監聽器內部，檢查所有複選框是否被選中。
button.disabled = false; for ( let i = 0; i < checkbox.length; i++ ) { if ( checkbox[i].checked == false ) // if any single checkbox is unchecked, disable the button. button.disabled = true; }
示例
在下面的示例中，我們建立了三個名稱相同的複選框，這意味著它們都屬於同一組。此外，我們在 HTML 中建立了按鈕，並在 JavaScript 中使用 id 和 name 訪問按鈕和複選框。
我們在所有複選框中添加了事件監聽器。當任何複選框的值發生更改時，它將檢查所有複選框是否被選中。如果所有複選框都被選中，則事件監聽器將啟用按鈕。否則，按鈕保持停用狀態。
<html> <head> </head> <body> <h2>Check whether the Checkbox is checked or not</h2> <h4>Check the below all checkboxes to enable the submit button.</h4> <input type = "checkbox" name = "checkbox"> <input type = "checkbox" name = "checkbox"> <input type = "checkbox" name = "checkbox"> <button id = "btn" disabled> enable button</button> <script> // access elements by id and name let checkbox = document.getElementsByName("checkbox"); let button = document.getElementById("btn"); // Initialilly checkbox is disabled for (let i = 0; i < checkbox.length; i++) { // iterate through every checkbox and add event listner to every checkbox. checkbox[i].addEventListener( "change", () => { button.disabled = false; // if all checkbox values is checked then button remains enable, otherwise control goes to the if condition and disables button. for (let i = 0; i < checkbox.length; i++) { if ( checkbox[i].checked == false ) button.disabled = true; } }); } </script> </body> </html>
在上面的輸出中，使用者可以看到，當他們選中所有複選框時，按鈕將被啟用，否則按鈕保持停用狀態。
在本教程中，我們學習瞭如何檢查單個或多個複選框是否被選中。根據複選框的選擇值，我們向網頁添加了不同的行為。
此外，使用者可以使用 jQuery 等 JavaScript 庫，因此使用者需要花費更少的精力來檢查多個複選框。
51K+ 瀏覽量
