Javascript复选框切换问题

Question

Hi I'm trying to get a simple script that'll hide or show a div based on if a user clicks a checkbox on the page.

I have a test HTML written with the elements I want to edit, along with the script but when I test it firebug now chrome developer consoles shows an error or the script even being called.

I've looking at both of these for reference:

How to check whether a checkbox is checked in jQuery?
How to grey out checkbox unless radio button is selected?

This is the reference to the jQuery library I'll be using.

<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

As well as the script I'm trying to get working:

$('extendedStay').click(function(){
  $('#extendedQuarter').toggle(this.checked);
});

And the elements I'm trying to get working:

<div id="extendedResponse" align="left">
    <form action="">
        <div name="extendedStayResponses">
            <input type="checkbox" name="extendedStay" id="extendedStay"/>Yes
        </div>
        <div id="extendedQuarter" style="display:none">
            <select name="extraQuarters" selected="1">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </div>
    </form>
</div>

Am I just improperly implementing the function or is there some syntax error I', not seeing.

Answer 1

Add a # for id selectors. Also if this script is executing on page load you should place it without a $(document).ready() function.

  <script>
      $(document).ready(function(){
        $('#extendedStay').click(function(){
            $('#extendedQuarter').toggle(this.checked);
        });
      });
    </script>

Working Example: http://jsfiddle.net/Lv8eX/