js checkbox的焦点事件onBlur和onFocus

时间:2017-03-22
本文章通过实例向大家介绍checkbox的焦点事件(失去焦点onFocus和获取焦点onBlur),需要的朋友可以参考一下。

CheckBox的焦点事件onFocus:

<html>
    <form name="orderForm">
      <input type="checkbox"
             name="peppers">Peppers<br>
      <input type="checkbox"
             name="sausage"
             onFocus="chooseExtraCheese()">Sausage<br>
      <input type="checkbox"
             name="cheese">Extra Cheese<hr>
      <input type="button"
             value="Order Pizza"
             name="orderButton"
             onClick="console.log('ordered.')">
    </form>
    <script language="JavaScript">
    function chooseExtraCheese()
    {
      if(document.orderForm.sausage.checked == false)
      {
        document.orderForm.cheese.checked = true;
      }
    }
    document.write("checkbox onFocus event handler: ");
    document.write(document.orderForm.sausage.onFocus);
    </script>
</html>

CheckBox的失去焦点事件onBlur:

<html>
    <form name="orderForm">
      <input type="checkbox" name="peppers" onBlur="my()">Peppers<br>
      <input type="checkbox" name="sausage">Sausage<hr> 
      <input type="button"
             value="Order Pizza"
             name="orderButton"
             onClick="console.log('Your pizza has been ordered.')">
    </form>
    <script language="JavaScript">
    function my()
    {
      if(document.orderForm.peppers.checked == true)
      {
        console.log("peppers.");
      }
    }
    </script>
</html>