极客笔记如何在复选框中使用JavaScript函数
在处理HTML复选框时，开发人员有时需要使用复选框允许用户选择多个选项。同时，开发人员也需要根据选中的复选框执行一些操作。
例如，您可以给复选框提供一个问题，例如您是否年满18岁？如果用户选中了该复选框，那么只显示输入框以获取用户的身份证号码。因此，我们需要在用户选中和取消选中复选框时调用一个函数。
使用onchange事件
onchange事件属性允许我们在用户选中和取消选中复选框时调用一个函数。我们可以将函数调用表达式作为onchange事件属性的值传递。
语法
用户可以按照以下语法使用onchange事件属性来调用函数。
<input type = "checkbox" onchange = "showHidePan()">
在上面的语法中，我们定义了复选框类型的输入，并使用showHidePan()函数表达式作为onchange事件属性的值。
示例1
在下面的示例中，我们创建了复选框输入，询问18岁以上的用户。因此，可以看出我们也可以使用复选框从用户那里获取回答yes或no。
此外，每当复选框的值改变时，我们调用showHidePan()函数。在showHidePan()函数中，我们使用复选框输入的“checked”属性来检查复选框是否被选中，根据这个结果，我们显示或隐藏身份证号输入框。
<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事件属性调用任何函数。
语法
用户可以按照下面的语法使用checkbox输入与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
下面的示例中有一个带有标签“are you male?”的复选框。当用户选中或取消复选框时，它会触发一个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>
这个教程教给我们三种使用复选框的函数的方法。所有的方法都执行相同的任务，当用户选择或取消选择复选框时调用函数。