极客教程如何在复选框中使用JavaScript函数
在使用HTML复选框时，有时开发者可能需要使用复选框来让用户选择多个选项。此外，开发人员还需要根据所选复选框执行一些操作。
例如，你已经给了复选框一个问题，如你是否超过18岁？如果用户勾选了这个复选框，就只显示输入，以获取用户的pan卡号。因此，我们需要在用户检查和取消检查复选框时调用一个函数。
使用onchange事件
onchange事件属性允许我们在用户检查和取消检查复选框时调用一个函数。我们可以把函数的调用表达式作为onchange事件属性的一个值来传递。
语法
用户可以按照下面的语法来使用onchange事件属性来调用一个函数。
<input type = "checkbox" onchange = "showHidePan()">
在上面的语法中，我们定义了复选框类型的输入，并使用showHidePan()函数表达式作为onchange事件属性的一个值。
例子1
在下面的例子中，我们创建了复选框输入，它要求用户在18岁以上。因此，它表明我们也可以使用复选框来获取用户的答案是或不是。
此外，每当复选框的值发生变化时，我们就调用showHidePan()函数。在showHidePan()函数中，我们使用复选框输入的’checked’属性来检查复选框是否被选中，在此基础上，我们显示pan卡号输入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元素上的特定事件。我们可以使用改变或点击事件作为addEventListner()方法的第一个参数，以便在用户勾选和取消勾选的时候执行一些动作。
语法
用户可以按照下面的语法来使用复选框的addEventListner()方法。
male_check.addEventListener('change', function () {
// perform some action based on the checkbox being checked or unchecked.
})
在上面的语法中，我们将 “变化 “事件作为第一个参数，将回调函数作为第二个参数。
例子3
下面的例子有一个标有 “你是男性吗？”的复选框。当用户选中或取消选中该复选框时，将触发一个变化事件，并执行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>
本教程教给我们三种在复选框中使用函数的方法。所有的方法都是在用户检查或取消检查时调用函数，执行相同的任务。