Geek Answers Handbook

Toggle DIV visibility based on switch selection

I am still finding my way around Javascript at the moment, so I apologize if I missed something really obvious with this (probably!).

I have a small form with several switches, for example:

<input type="radio" name="dtype" id="dtype" value="option1"> <input type="radio" name="dtype" id="dtype" value="option2"> <input type="radio" name="dtype" id="dtype" value="option3"> <input type="radio" name="dtype" id="dtype" value="option4">

Based on user selection, I need to immediately show the corresponding div. This works fine for me for the first radio, but not for subsequent ones (and there are no errors in Firebug). This is what I have right now;

 <script type="text/javascript"> $(function() { $('#dtype').change(function() { if($(this).val() == 'option1') {$('#div1').slideToggle('500');} if($(this).val() == 'option2') {$('#div2').slideToggle('500');} if($(this).val() == 'option3') {$('#div3').slideToggle('500');} if($(this).val() == 'option4') {$('#div4').slideToggle('500');} }); }); </script>

I also tried "even if" at 3 after the first, without success. Pointers are welcome!

+4
source share
3 answers

You are trying to select all of your input elements using the same identifier (the ID must be unique ). You can try changing your #dtype to a .dtype class and select them through. instead of this.

This is where jsFiddle works in relation to your use case.

HTML:

 <input type="radio" name="dtype" class="dtype" value="option1"> <input type="radio" name="dtype" class="dtype" value="option2"> <input type="radio" name="dtype" class="dtype" value="option3"> <input type="radio" name="dtype" class="dtype" value="option4"> <div id="div1">A</div> <div id="div2">B</div> <div id="div3">C</div> <div id="div4">D</div>

JQuery

 $(function() { $('.dtype').change(function() { if($(this).val() == 'option1') {$('#div1').slideToggle('500');} if($(this).val() == 'option2') {$('#div2').slideToggle('500');} if($(this).val() == 'option3') {$('#div3').slideToggle('500');} if($(this).val() == 'option4') {$('#div4').slideToggle('500');} }); });
+3
source

Identifiers must be unique, so you must do this:

 <input type="radio" name="dtype" id="dtype1" value="option1"> <input type="radio" name="dtype" id="dtype2" value="option2"> <input type="radio" name="dtype" id="dtype3" value="option3"> <input type="radio" name="dtype" id="dtype4" value="option4">

And the script:

 <script type="text/javascript"> $(function() { $('input[name=dtype]').change(function() { if($(this).val() == 'option1') {$('#div1').slideToggle('500');} if($(this).val() == 'option2') {$('#div2').slideToggle('500');} if($(this).val() == 'option3') {$('#div3').slideToggle('500');} if($(this).val() == 'option4') {$('#div4').slideToggle('500');} }); }); </script>
0
source

Your problem with the ID, you have the same ID for all switches - change the identifier to a class so that it looks like this:

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <input type="radio" name="dtype" class="dtype" value="option1"> <input type="radio" name="dtype" class="dtype" value="option2"> <input type="radio" name="dtype" class="dtype" value="option3"> <input type="radio" name="dtype" class="dtype" value="option4"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <script type="text/javascript"> $(function() { $('.dtype').change(function() { alert($(this).val()); if($(this).val() == 'option1') {$('#div1').slideToggle('500');} else if($(this).val() == 'option2') {$('#div2').slideToggle('500');} else if($(this).val() == 'option3') {$('#div3').slideToggle('500');} else if($(this).val() == 'option4') {$('#div4').slideToggle('500');} }); }); </script>
0
source

More articles:


All Articles