I am stuck with Checkbox Attribute

I recently start to learn JavaScript and have a question about checkbox Attribute.

I want to put Nickname feature that is if someone want to put his/her nickname, he/she can check the checkbox and it appears the text box for Nickname. However, when the page is loaded, the text box is there even though the checkbox is not checked. Can anyone please help me with the problem...?

<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>

<div id= "nick">
    <label for = "nickname">Nickname:</label>
    <input type="text" name="nickname" id="nickname"><br/>
</div>

<input type="submit" value="Vertify"/>

<script type="text/javascript">
    function nicknameFunction() {
        if (document.getElementById('yesNick').checked){
            document.getElementById('nick').style.display="inline";
            document.getElementById('nickname').setAttribute('required',true);
        }
        else{
            document.getElementById('nickname').removeAttribute('required');
            document.getElementById('nick').style.display="none";
        }
        }

</script>
</form>
</fieldset>
</p>