Input field appearing on default checked select box

I'm working on a form where we have the option to assign products to an object or in this case an user. Depending on the values given in our database that is retrieved and used in the code this user may have one of these specific product by default.

if($Pants=="1"){
   echo "<input type='checkbox' onclick='PantsInput(this);' checked>Pants<br>";
}
else {
   echo "<input type='checkbox'> Pants<br>";
}

There's a little JavaScript that creates a text input field if the checkbox is selected. It works, but ONLY if I go ahead and select it manually.

What I am trying to accomplish is for the script to recognize if the checkbox is already checked or not. It should still be possible to do it manually, but it would be great for the fields to appear on load if the checkbox is already checked.

Here's the script:

function PantsInput(cbox) {
      if (cbox.checked) {
        var input = document.createElement("input");
        input.type = "text";
        input.value = "1";
        input.name = "AmountPants"
        var div = document.createElement("div");
        div.id = cbox.name;
        div.innerHTML = "Amount of pants: ";
        div.appendChild(input);
        document.getElementById("pantsinput").appendChild(div);
      } else {
        document.getElementById(cbox.name).remove();
      }
    }

Here's a JSFiddle that shows what I am struggling with: http://ift.tt/2eUehgr

The box is already checked but the field will only appear if you go ahead and uncheck and check it again yourself. I've tried some different DOM Events, but can't seem to do it.