Javascript Form How to - Handle focus got event for CheckBox

Question

We would like to know how to handle focus got event for CheckBox.

Answer


<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()<!--  w  ww .j  a v a 2  s . c  o m-->
    {
      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>

The code above is rendered as follows: