数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
