How to change text display when checkbox checked

I am making a form that will have checkboxes and entry text. When a checkbox is check, related text should appear adjacent to it. This is my current code, but it does not work: HTML:

<input type="checkbox" class="box1" onchange="showHide()"> Option 1
<div class="hid box1">
<select name="option1">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
Comments: <input type="text" name="option1Comment">
</div>

CSS:

    .hid {
        display: none;
    }

JavaScript:

    function showHide() {
        var checkBox = document.getElementByClassName(this);
        var text = document.getElementByClassName(this "hid");
        if (checkBox.checked == true){
            text.style.display = "block";
        } else {
            text.style.display = "none";
        }
    }