資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在複選框中使用 JavaScript 函式？
在使用 HTML 複選框時，有時開發人員可能需要使用複選框來允許使用者選擇多個選項。此外，開發人員需要根據所選複選框執行某些操作。
例如，您提供了一個複選框，詢問使用者是否年滿 18 歲？如果使用者選中此複選框，則僅顯示輸入以獲取使用者的身份證號碼。因此，我們需要在使用者選中和取消選中複選框時呼叫一個函式。
使用 onchange 事件
onchange 事件屬性允許我們在使用者選中和取消選中複選框時呼叫一個函式。我們可以將函式呼叫表示式作為 onchange 事件屬性的值傳遞。
語法
使用者可以按照以下語法使用 onchange 事件屬性來呼叫函式。
<input type = "checkbox" onchange = "showHidePan()">
在上述語法中，我們定義了複選框型別的輸入，並將 showHidePan() 函式表示式用作 onchange 事件屬性的值。
示例 1
在下面的示例中，我們建立了複選框輸入，詢問使用者是否年滿 18 歲。因此，它表明我們也可以使用複選框從使用者那裡獲取是或否的答案。
此外，每當複選框值發生變化時，我們都會呼叫 showHidePan() 函式。在 showHidePan() 函式中，我們使用複選框輸入的“checked”屬性來檢查複選框是否被選中，並根據此情況顯示身份證號碼輸入 div。
<html>
<body>
<h3>Using the <i> onchange event attribute </i> to invoke the particular function whenever the user checks and unchecks checkbox </h3>
<label for = "check"> Are you above 18? </label>
<input type = "checkbox" id = "check" value = "18" onchange = "showHidePan()"> <br><br>
<div id = "pan-input">
<label for = "pan"> Enter your pan number </label>
<input type = "text" id = "pan">
</div>
<script>
function showHidePan() {
let checkbox = document.getElementById('check');
let pan_input = document.getElementById('pan-input');
if (checkbox.checked) {
pan_input.style.display = "flex";
} else {
pan_input.style.display = "none";
}
}
</script>
</body>
</html>
使用 onclick 事件
每當我們點選任何元素時，onclick 事件都會觸發該特定元素。我們也可以將 onclick 事件與複選框一起使用。因此，每當使用者選中或取消選中複選框時，我們可以使用 onclick 事件屬性呼叫任何函式。
語法
使用者可以按照以下語法使用 onclick 事件與複選框輸入。
<input type = "checkbox" onclick = "function()">
在上述語法中，我們將函式執行表示式作為 onclick 事件屬性的值傳遞。函式是要在使用者點選複選框時呼叫的函式的名稱。
示例 2
在下面的示例中，我們建立了兩個複選框；一個是水果，另一個是蔬菜。使用者可以選擇其中任何一個或同時選擇兩個複選框。
當用戶點選水果和蔬菜的複選框時，我們分別呼叫 showFruits() 函式和 showVegetables() 函式。在 showFruits() 和 showVegetables() 函式中，我們根據複選框是否被選中設定水果和蔬菜 div 的顯示。
<html>
<body>
<h3> Using the <i> onclick event attribute </i> to invoke the particular function whenever the user checks and unchecks checkbox </h3>
<label for = "fruit"> Fruits </label>
<input type = "checkbox" id = "fruit" onclick = "showFruits()">
<label for = "vegetables"> Vegetables </label>
<input type = "checkbox" id = "vegetables" onclick = "showVegetables()"> <br><br>
<div id = "vegetables-div">
<ul>
<li> Cabbage </li>
<li> Celery </li>
<li> Carrot </li>
<li> Onion </li>
<li> Tomato </li>
<li> Potato </li>
</ul>
</div>
<div id = "fruits-div">
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Guavava </li>
<li> Graps </li>
<li> Watermelon </li>
<li> Strabary </li>
</ul>
</div>
<script>
function showFruits() {
let fruit = document.getElementById('fruit');
let fruits_div = document.getElementById('fruits-div');
if (fruit.checked) {
fruits_div.style.display = "flex";
} else {
fruits_div.style.display = "none";
}
}
function showVegetables() {
let vegeltable = document.getElementById('vegetables');
let vegeltables_div = document.getElementById('vegetables-div')
if (vegeltable.checked) {
vegeltables_div.style.display = "flex";
} else {
vegeltables_div.style.display = "none";
}
}
</script>
</body>
</html>
使用 addEventListner 方法
addEventListner() 方法用於偵聽網頁或 HTML 元素上的特定事件。我們可以使用 change 或 click 事件作為 addEventListner() 方法的第一個引數，以便在使用者選中和取消選中複選框時執行某些操作。
語法
使用者可以按照以下語法使用 addEventListner() 方法用於複選框。
male_check.addEventListener('change', function () {
// perform some action based on the checkbox being checked or unchecked.
})
在上述語法中，我們將“change”事件作為第一個引數，並將回撥函式作為第二個引數傳遞。
示例 3
下面的示例有一個名為“您是男性嗎？”的複選框。當用戶選中或取消選中複選框時，它將觸發 change 事件並在 addEventListner() 方法的回撥函式中執行定義的操作。
在回撥函式中，我們透過 id 訪問 text_div 並更改其內部 HTML。
<html>
<body>
<h3> Using the <i> addEventListner() method </i> to invoke the particular function whenever user checks and unchecks checkbox </h3>
<label for = "male"> Are you male? </label>
<input type = "checkbox" id = "male"> <br><br>
<div id = "text-div"> You are not a male. </div>
<script>
let male_check = document.getElementById('male');
male_check.addEventListener('change', function () {
let text_div = document.getElementById('text-div');
if (male_check.checked) {
text_div.innerHTML = "You are a male."
} else {
text_div.innerHTML = "You are not a male."
}
})
</script>
</body>
</html>
本教程向我們介紹了三種使用複選框函式的方法。所有方法都執行相同的任務，即在使用者選中或取消選中複選框時呼叫函式。
12K+ 瀏覽量
