Display appearing after first onclick but then display remains when it should disappear

I am attempting to have a dropdown and text appear and disappear depending on the status of a chekbox. If the checkbox is clicked I want the label and dropdown to appear, and disappear when it is unchecked. The elements begin not visible, and after I check the cheeckbox the elements appear, however, when I uncheck the chekbox, the elements do not go away.

I tried using the onclick property that calls a function that depending on the status of the checkbox changes the properties of the two elements. However, it only does something on the first click.

this is the html code:

<div class="formItem">
    <label>Affect Commission Cost</label>
    <form:checkbox path="affectCommissions" id="affectCommissions" onchange="toggleCommissionItems()"/>
    <label id="commissionItemTypeLabel" style="display: none">Commission Item Type</label>
    <form:select path="commissionItemType" id="commissionItem" cssStyle="display: none">
        <form:options items="${commissionItems}" itemLabel="name" itemValue="code"></form:options>
    </form:select>
</div>

this is the function that is called:

function toggleCommissionItems(){
  var checkBox = document.getElementById("affectCommissions");
  var item = document.getElementById("commissionItem");
  var label = document.getElementById("commissionItemTypeLabel");
  if (checkBox.checked == true){
    item.style.display = "inline";
    label.style.display = "inline";
  } else {
    item.style.display = "none";
    label.style.display = "none";
  }
}

It should always toggle whether the elements appear on the page, however it only works on the first try.