Q:

Showing input when CheckBox is checked

I am creating a contact form, I have two inputs, of type="checkbox"; the first one is email, and is already checked, but I want to uncheck this, in the event that the user picks the "Phone" option, and show the phone input in which to enter the phone number.
Here's the code:
at JS Fiddle
I hope you guys can help me, I'm still a js newbie but I have learnt a lot.
HTML
                
                
                    Name *:
                    
                <label for="">Email <span>*</span>:</label>
                <input type="email" placeholder="Email (Required)">

                <label for="">Got a question? <span>*</span>:</label>
                <textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>

                <label for="">Best form to contact</label>

                <div>
                    <p>Email: </p>
                    <input type="checkbox" name="fruit" value="email" id="email2" checked>
                </div>

                <div>
                    <p>Phone: </p>
                    <input type="checkbox">

                    <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed"> 
                </div>

                <div class="SendButton">
                    <a href="" id="send">Send</a>
                </div>
            </form>
        </div>
    </div>

Javascript
$('#ChatContainer').hide();
    $('.NoDisplayed').hide();

    $('#ChatToggle').click(function(){
        $('#ChatContainer').toggle('slow');
    });

Thank you.

A:

I'd suggest associating your 'preferred contact' choices together, using radio-inputs (since 'preferred' is an exclusive choice to make, whereas 'acceptable' might include all possible options), giving:
<label for="">Best form to contact</label>
<div>
    <p>Email:</p>
    <input type="radio" name="contact" value="email" id="email2" checked="checked" />
</div>
<div>
    <p>Phone:</p>
    <input type="radio" name="contact" value="phone" />
    <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</div>

Which would work with the following jQuery:
$('input[type="radio"][name="contact"]').on('change', function(){
    $('#phonecheck').toggle(this.value === 'phone');
});

JS Fiddle demo.
It's worth also noting that your HTML is somewhat problematic; your <label> elements weren't associated with any (let alone 'specific') form-elements; you were using a <label> simply to provide a form's section-name (for which the <legend> attribute should be used, within a <fieldset> grouping). That said, I've corrected your HTML and moved the phone-number entry box outside of the <div> that was containing the checkbox (and now contains a radio-input), to reduce the jarring effect of the <form> suddenly being displaced. There's still a bit of a jump, but not quite so profound.
Here's the amended HTML, which still works with the above jQuery:
<div id="ContactForm">
    <div id="ChatToggle">
        <p>Contact Us</p>
    </div>
    <div id="ChatContainer">
        <form action="">
            <label>Name <span>*</span>:
                <input type="text" placeholder="Your Name (Required)" />
            </label>
            <label>Email <span>*</span>:
                <input type="email" placeholder="Email (Required)" />
            </label>
            <label>Got a question? <span>*</span>:
                <textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
            </label>
            <fieldset>
                <legend>Best form to contact</legend>
                <div>
                    <label>Email:
                        <input type="radio" name="contact" value="email" id="email2" checked="checked" />
                    </label>
                </div>
                <div>
                    <label>Phone:
                        <input type="radio" name="contact" value="phone" />
                    </label>
                </div>
                <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
            </fieldset>
            <div class="SendButton">    <a href="" id="send">Send</a>

            </div>
        </form>
    </div>
</div>

JS Fiddle demo.
References:

CSS:

Attribute-equals (attribute="value") selector.

HTML Elements:

<fieldset>.
<label>.
<legend>.
<input />.

jQuery:

on().
toggle().

