I would like to show a form field textbox only when a certain checkbox is checked, and hide it when it is unhecked. I have gotten the code to make it hide when I check the box, but the textbox is displayed when the page is loaded until I check the box, which is opposite of what I would like to acplish. I am pretty newbish with javascript so I am sure this is pretty elementary. Thanks for any help.

HTML:

<input type="checkbox" onclick="ShowCCFields(this.value);" name="CAT_Custom_510969" id="CAT_Custom_510969_7" value="Other..." />
Other...

<div class="item" id="other">
    <label for="CAT_Custom_510972">Other:</label><br />
    <textarea onkeydown="if(this.value.length&gt;=4000)this.value=this.value.substring(0,3999);" class="cat_listbox" rows="4" cols="10" id="CAT_Custom_510972" name="CAT_Custom_510972"></textarea>
</div>  

javascript:

// Hide or show textarea if the other checkbox field is checked
        var voucher = document.getElementById("CAT_Custom_510969_7");
        function ShowCCFields(val) {                            
            if (!document.getElementById('other'))
                return;         
            if (val == voucher.checked)
                document.getElementById('other').style.display = 'inline';              
            else
                document.getElementById('other').style.display = 'none';
        }   

I would like to show a form field textbox only when a certain checkbox is checked, and hide it when it is unhecked. I have gotten the code to make it hide when I check the box, but the textbox is displayed when the page is loaded until I check the box, which is opposite of what I would like to acplish. I am pretty newbish with javascript so I am sure this is pretty elementary. Thanks for any help.

HTML:

<input type="checkbox" onclick="ShowCCFields(this.value);" name="CAT_Custom_510969" id="CAT_Custom_510969_7" value="Other..." />
Other...

<div class="item" id="other">
    <label for="CAT_Custom_510972">Other:</label><br />
    <textarea onkeydown="if(this.value.length&gt;=4000)this.value=this.value.substring(0,3999);" class="cat_listbox" rows="4" cols="10" id="CAT_Custom_510972" name="CAT_Custom_510972"></textarea>
</div>  

javascript:

// Hide or show textarea if the other checkbox field is checked
        var voucher = document.getElementById("CAT_Custom_510969_7");
        function ShowCCFields(val) {                            
            if (!document.getElementById('other'))
                return;         
            if (val == voucher.checked)
                document.getElementById('other').style.display = 'inline';              
            else
                document.getElementById('other').style.display = 'none';
        }   

• javascript
• forms
• html

Share Improve this question Follow asked Nov 5, 2013 at 20:59 PhordenPhorden 1,03444 gold badges2020 silver badges4545 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Why not set the display to none to begin with? You can do that in CSS or just add it to

<div class="item" id="other" style="display: none;">

Set the style to none in the HTML, just like you do in the javascript:

<div class="item" id="other" style="display:none;">

Set Display to none in the control you want to hide :

<div class="item" id="other" style="display: none;">

And In your js Function :

document.getElementById('other').style.display = 'inline';