在 JavaScript 中驗證核取方塊
在本文中，我們將使用輸入元素的 checked 屬性介紹 JavaScript 中的核取方塊驗證。
使用 checked 屬性驗證 JavaScript 中的核取方塊
JavaScript 中的 input 元素用於接收使用者的輸入。這也可以在表單中使用。
它為我們提供了一個 checked 屬性來驗證 JavaScript 中的核取方塊。如果使用者選中核取方塊，則 checked 屬性將返回 true；否則，它將返回 false。
下面我們有一個 HTML 文件。我們在 body 元素中有一個標籤和一個按鈕。
使用 label 元素，我們可以為核取方塊提供標籤。input 元素包裹在 label 元素周圍。
為了使這個輸入成為一個核取方塊，我們必須將它的型別設定為 checkbox，並且我們還必須為輸入提供一個 ID 為 checkbox 的輸入，以便在 JavaScript 中訪問這個元素。
<!DOCTYPE html>
<html>
<head>
<body>
<label for="Select Checkbox">
<input type="checkbox" id="checkbox"> Accept
</label>
<button id="submit">Submit</button>
<script>
const checkbox = document.getElementById('checkbox');
const btn = document.getElementById('submit');
btn.onclick = () => {
if(!checkbox.checked)
console.log("Checkbox selected: ", checkbox.checked);
else
console.log("Checkbox selected: ", checkbox.checked);
};
</script>
</body>
</html>
輸出：
在這裡，我們首先儲存了 checkbox 元素的引用，我們使用 DOM API 的 getElementById() 方法在 HTML 中定義了該元素。同樣，我們也為提交按鈕執行此操作。
現在我們已經將核取方塊和提交按鈕儲存在 checkbox 和 btn 變數中，我們使用它們來執行驗證。在這裡，我們在 btn 上設定了一個 onclick() 元素，一經按下，它將執行一個函式。
在這個函式中，我們使用了一個條件語句並檢查 checkbox.checked 是否為真。
請注意，我們使用了感嘆號!在 if 塊內。這意味著如果使用者不選中核取方塊，checkbox.checked 將返回 false，而 !false 將變為 true。
由於使用者沒有選中核取方塊，我們在 if 塊內輸入，然後列印 Checkbox selected: false。
否則，如果使用者單擊核取方塊，我們將進入 else 塊，並且列印在控制檯上的訊息將是 Checkbox selected: true。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn