Javascript checkbox toggle issue

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.

`.toggle()` has been deprecated since 1.8 and has been removed since 1.9. As you can read in the docs. http://api.jquery.com/toggle-event/ — Bram Vanroy, Mar 10 '13 at 17:32
@BramVanroy Can you point me to a resource that notes this? I'm not seeing it in the api documents. — Kevin Bowersox, Mar 10 '13 at 17:37
@BramVanroy Ah if that's the case then it would explain why it's not even getting any response in firebug/developer console. — DrTran, Mar 10 '13 at 17:41
@BramVanroy that appears only to be if your attaching functions to alternate on toggle, it does not include the base case of simply hiding or showing an element — Kevin Bowersox, Mar 10 '13 at 17:43

Kevin Bowersox · Accepted Answer · 2013-03-10T17:59:30.290

4

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/

edited Mar 10 '13 at 17:59

answered Mar 10 '13 at 17:33

Kevin Bowersox

93,289
19
159
189

EDIT: Hmm tried it out and still not doing anything for me. Does anyone wanna try it on there end thinking it's just my laptop. The html is simply a standard html document with the header with the reference call, and both the script and divs in the body. Could it be my reference call? – DrTran Mar 10 '13 at 17:34
@DrTran I updated give it a shot, I'm not seeing evidence that toggle is deprecated, I got led astray. – Kevin Bowersox Mar 10 '13 at 17:41
@KevinBowersox Still nothing. I've tried .hide() and .show() as well but those didn't work for me either. Still trying to think what else I could be doing wrong. EDIT: Unless those have been deprecated as well. – DrTran Mar 10 '13 at 17:44
@DrTran I added a fiddle to support your cause. Is the issue in all browsers? – Kevin Bowersox Mar 10 '13 at 17:45
@KevinBowersox That is extremely weird cause the fiddle you sent me is working correctly. Makes me wonder if it's just my laptop now. Either way you do provide me an example of it working. So thanks again. EDIT: I've only tested it in FF, Chrome, and IE but neither worked. – DrTran Mar 10 '13 at 17:47
Its most likely not your laptop, I would either add an alert in the event handler or a debug point in firebug. Make sure the click event is being fired, you can debug from there. – Kevin Bowersox Mar 10 '13 at 17:49
@KevinBowersox Sorry for blasting you with notifications but I tried throwing an alert in like you said. Same issue. Doesn't work in any browser I try, but works in the fiddle just fine. EDIT: I did it before the toggle function call as well. – DrTran Mar 10 '13 at 17:54
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25915/discussion-between-kevin-bowersox-and-drtran) – Kevin Bowersox Mar 10 '13 at 17:54

Javascript checkbox toggle issue

1 Answers1