javascript checkbox的onclick事件

时间:2017-03-22
本文章向大家介绍js checkbox的click事件,主要从两个实例介绍如何处理CheckBox的click事件,需要的朋友可以参考一下。

我们想知道如何处理CheckBox的click事件。

实例1:

<html>
    <form name="orderForm">
      <input type="checkbox" name="door4" onClick="console.log('door4')">4 doors<br>
      <input type="checkbox" name="door2" onClick="displayNote()">2 doors<hr>
      Step 2:
      <input type="button" value="Submit Order" name="orderButton" onClick="console.log('submitted')">
    </form>
    <script language="JavaScript">
    function displayNote(){
      console.log("Have you considered the 4-door version?");
      document.orderForm.door4.click();
    }
    </script>
</html>

实例2:

<html>
    <form name="orderForm">
      <input type="checkbox" name="peppers" onClick="recommendSausage()">Peppers<br>
      <input type="checkbox" name="sausage">Sausage<hr>
      Step 2:
      <input type="button" value="Order Pizza" name="orderButton" onClick="console.log('ordered.')">
    </form>
    <script language="JavaScript">
    function recommendSausage()
    {
      if(document.orderForm.peppers.checked == true)
      {
        console.log("Sausage goes well with peppers.");
      }
    }
    document.write("The pepper checkbox onClick event handler: ");
    document.write(document.orderForm.peppers.onclick);
    </script>
</html>