如何在复选框中使用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>