資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在HTML中在一個複選框和一組複選框之間切換？
切換意味著，每當使用者選中一個複選框時，組中的所有複選框都應取消選中；而當用戶選中組中的任何複選框時，單個複選框應取消選中。我們可以用JavaScript實現此功能。在本教程中，我們將學習如何在HTML中在一個複選框和一組複選框之間切換。
語法
使用者可以按照以下語法在HTML中在一個複選框和一組複選框之間切換。
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
})
在上面的語法中，`checkboxes` 是組中的所有複選框。要取消選中複選框，可以將複選框的 `checked` 屬性的值設定為 `false`。
示例1
在下面的示例中，我們建立了一組名為 `table_size` 的複選框。我們還建立了單個複選框。
在組的每個複選框上，我們添加了一個 `onclick` 事件，該事件呼叫 `clearSingle()` 函式。在 `clearSingle()` 函式中，我們訪問單個複選框並使用JavaScript取消選中它。
同樣，在單個複選框上，我們添加了 `onclick` 事件，該事件呼叫 `clearGroup()` 函式。在 `clearGroup()` 函式中，我們訪問組中的所有複選框並取消選中它們。
<html>
<body>
<h2> Using the <i> JavaScript </i> to toggle between one checkbox and group of checkboxes. </h2>
<label for = "table1"> 4 Feet </label>
<input type = "checkbox" name = "table_size" id = "table1" value = "4Feet" onclick = "clearSingle()">
<label for = "table2"> 5 Feet </label>
<input type = "checkbox" name = "table_size" id = "table2" value = "5Feet" onclick = "clearSingle()">
<label for = "table3"> 6 Feet </label>
<input type = "checkbox" name = "table_size" id = "table3" value = "6Feet" onclick = "clearSingle()">
<label for = "table4"> 8 Feet </label>
<input type = "checkbox" name = "table_size" id = "table4" value = "8Feet" onclick = "clearSingle()"> <br> <br>
<label for = "clear"> Clear </label>
<input type = "checkbox" name = "clear" id = "clear" value = "clear" onclick = "clearGroup()">
</body>
<script>
function clearGroup() {
let checkboxes = document.getElementsByName('table_size');
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
})
}
function clearSingle() {
let singleCheckBox = document.getElementById('clear');
singleCheckBox.checked = false;
}
</script>
</html>
在上面的示例中，我們為每個複選框添加了一個 `onclick` 事件，這可能會使程式碼更復雜且難以閱讀。因此，在示例2中，我們將使用JavaScript為每個複選框新增 `onchange` 事件。
示例2
在下面的示例中，我們建立了一組複選框和一個單獨的複選框。我們在組的每個複選框上添加了一個 `onchange` 事件。因此，每當組中任何複選框發生更改時，它都會清除單個複選框。
此外，我們在單個複選框上添加了 `onchange` 事件。每當單個複選框發生任何更改時，它都會清除組中的所有複選框。
<html>
<body>
<h2> Using the <i> JavaScript </i> to toggle between one checkbox and group of checkboxes </h2>
<label for = "USD"> 20 USD </label>
<input type = "checkbox" name = "Currency" id = "USD" value = "20">
<label for = "INR"> 1500 INR </label>
<input type = "checkbox" name = "Currency" id = "INR" value = "1500">
<label for = "Euro"> 20 Euro </label>
<input type = "checkbox" name = "Currency" id = "Euro" value = "20">
<label for = "GBP"> 18 GBP </label>
<input type = "checkbox" name = "Currency" id = "GBP" value = "18">
<br> <br>
<label for = "clear"> clear </label>
<input type = "checkbox" name = "clear" id = "clear" value = "clear">
</body>
<script>
let currencyCheckBoxes = document.getElementsByName('Currency');
let singleCheckBox = document.getElementById('clear');
currencyCheckBoxes.forEach((checkbox) => {
checkbox.onchange = function () {
singleCheckBox.checked = false;
}
})
singleCheckBox.onchange = () => {
currencyCheckBoxes.forEach((checkbox) => {
checkbox.checked = false;
})
}
</script>
</html>
我們學習了兩個不同的示例，使用JavaScript在單個複選框和組複選框之間切換。在第一個示例中，我們使用了 `click` 事件，在第二個示例中，我們使用了 `change` 事件。
2K+ 次瀏覽
