資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 JavaScript 檢查/取消選中複選框的程式
在本文中，我們將學習如何在 JavaScript 中檢查或取消選中複選框，以及如何使用它來允許使用者在網頁上進行多項選擇。
複選框是表單和使用者介面中最常用的 HTML 元素之一，允許使用者選擇多個選項。在 JavaScript 中，我們可以根據某些條件或使用者互動動態地檢查或取消選中複選框。
讓我們來看一些示例，以更好地理解這個概念。
示例 1
在這個示例中，我們將：
我們將建立 3 個不同的複選框，一個 checkAll() 函式和一個 uncheckAll() 函式。
在 checkAll() 函式中，我們將選擇所有複選框，並使用 forEach() 方法遍歷選定的複選框，並將 checked 屬性設定為 true，從而選中所有複選框。
類似地，在 uncheckAll() 函式中，我們將遵循相同的步驟，但這次我們將 checked 屬性設定為 false，從而取消選中所有複選框。
檔名 - index.html
<html>
<head>
<title>Program To check / uncheck Checkboxes Using Javascript</title>
</head>
<body>
<h3>Program to check/uncheck checkboxes using JavaScript</h3>
<label>
<input type="checkbox" id="first ch"/>
Checkbox 1
</label>
<br/>
<label>
<input type="checkbox" id="second ch" />
Checkbox 2
</label>
<br/>
<label>
<input type="checkbox" id="third ch" />
Checkbox 3
</label>
<br/>
<button onclick="checkAll()">Check All</button>
<button onclick="uncheckAll()">Uncheck All</button>
<script>
function checkAll(){
const checkboxes=document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox)=>{
checkbox.checked=true;
})
}
function uncheckAll(){
const checkboxes=document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox)=>{
checkbox.checked=false
})
}
</script>
</body>
</html>
輸出
結果將類似於下面的影像。
示例 2 - 使用三元運算子
在這個示例中，讓我們進行以下更改：
更改事件偵聽器以檢測其狀態的變化，以及兩個分別標記為“選中所選”和“取消選中所選”的按鈕。
單擊時，這些按鈕將遍歷複選框並選中/取消選中具有 selected 類別的複選框。
檔名 - index.html
<html>
<head>
<title>Program To check / uncheck checkboxes using Javascript</title>
<script src="script.js"></script>
<style>
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<h3>Check/Uncheck Checkboxes</h3>
<ul>
<li>
<label>
<input type="checkbox" id="first ch" />
Checkbox 1
</label>
</li>
<li>
<label>
<input type="checkbox" id="second ch" />
Checkbox 2
</label>
</li>
<li>
<label>
<input type="checkbox" id="third ch" />
Checkbox 3
</label>
</li>
</ul>
<button onclick="checkSelected()">Check Selected</button>
<button onclick="uncheckSelected()">Uncheck Selected</button>
<script>
let checkboxes = document.querySelectorAll("[type='checkbox']");
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
ch.addEventListener('change', (evt) => {
if (evt?.target?.checked) {
evt.target.parentElement.parentElement.classList.add('selected');
} else {
evt.target.parentElement.parentElement.classList.remove('selected');
}
});
}
function checkSelected() {
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
if (ch.parentElement.parentElement.classList.contains('selected')) {
ch.checked = true;
}
}
}
function uncheckSelected() {
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
if (ch.parentElement.parentElement.classList.contains('selected')) {
ch.checked = false;
}
}
}
</script>
</body>
</html>
輸出
結果將類似於下面的影像。
結論
在本文中，我們學習瞭如何建立一個使用 JavaScript 檢查或取消選中複選框的程式。我們使用了複選框的 checked 屬性來切換其狀態。我們學習瞭如何在 JavaScript 中編寫檢查或取消選中複選框的程式碼，並查看了一些解釋相同的示例。
更新於：2023年8月16日
385 次檢視
廣告