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. api.jquery.com/toggle-event — Bram Vanroy
– Bram Vanroy, Commented Mar 10, 2013 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
– Kevin Bowersox, Commented Mar 10, 2013 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
– DrTran, Commented Mar 10, 2013 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
– Kevin Bowersox, Commented Mar 10, 2013 at 17:43

Kevin Bowersox · Accepted Answer · 2013-03-10 17:59:30Z

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, 2013 at 17:59

answered Mar 10, 2013 at 17:33

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

DrTran Over a year ago

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?

Kevin Bowersox Over a year ago

@DrTran I updated give it a shot, I'm not seeing evidence that toggle is deprecated, I got led astray.

DrTran Over a year ago

@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.

Kevin Bowersox Over a year ago

@DrTran I added a fiddle to support your cause. Is the issue in all browsers?

DrTran Over a year ago

@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.

|

Collectives™ on Stack Overflow

Javascript checkbox toggle issue

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related