0

There is my code

<input type="radio" name="category" id="elementary" value="elementary" /> 1
<input type="radio" name="category" id="junior" value="junior" /> 2
<input type="radio" name="category" id="senior" value="senior" /> 3
<input type="radio" name="category" id="university" value="university" /> 4
<input type="radio" name="category" id="profession"/> 5

<div id='grade_select' class="clearfix">
  <div id='elementary_grade' class="clearfix"></div>
  <div id='junior_grade' class="clearfix"></div>
  <div id='senior_grade' class="clearfix"></div>
  <div id='university_grade' class="clearfix"></div>
  <div id='profession_grade' class="clearfix"></div>
</div>

I want:

When check one radio, need to hide all the div in grade_select, and then show the div which id include the current radio value

There is my js code , I do not know how to going on

   <script type="text/javascript">
    $(document).ready(function($){
      $( "input[name='category']" ).bind( "click", category_select)
    });
    function category_select(){
        $("div:[id=this.attr[id]]).show()
    }
    </script>

FYI: This question is a spinoff of this other question.

14
  • Why don't you explain what this code is doing, what the error is, and what you expect it to do? Right now, you're only telling us what you want it to do. Also, there is a missing quote in your CSS selector in the category_select function. :) May 20, 2012 at 8:47
  • Uh, we don't do homework on stackoverflow....
    – Christian
    May 20, 2012 at 8:47
  • @Christian - Unfortunately it appears we do (See below).
    – JohnFx
    May 20, 2012 at 8:51
  • Best of it, they don't even describe what they're doing. Talking about clueless questions and even more clueless answers. At least one hopes they work...
    – Christian
    May 20, 2012 at 8:52
  • Sorry @jmort253 , I do not know how to going on , so I do know what error it will be
    – why
    May 20, 2012 at 8:53

6 Answers 6

4
<script type="text/javascript">
    $(document).ready(function($){
        $( "input[name='category']" ).bind( "click", function() {
            $("#grade_select div").hide().parent().find( '#' + this.id + "_grade" ).show();
        });
    });
</script>
3
  • 2
    The .find( this.id + "_grade" ) won't find anything. You need a # in the selector.
    – Guffa
    May 20, 2012 at 8:53
  • Not a big deal, but you traverse the DOM twice.
    – gdoron
    May 20, 2012 at 8:53
  • @Guffa...again made a silly mistake as i usually do...i'll just edit it. May 20, 2012 at 8:54
2

Try:

$("input[name='category']").click(function(){
    var id = $(this).attr('id');
    $("div#grade_select > div").hide();
    $("#" + id + "_grade").show();  
});​

Demo

1
  • Please my dear friend, don't use jQuery to get the id of a DOM element. $(this).attr('id'); => this.id Thanks!
    – gdoron
    May 20, 2012 at 8:54
1
$("input[name='category']").click(function(){
    $("#grade_select div").hide().filter('#' + this.id + '_grade').show();
});

Live DEMO

0

You can create a variable holding the ID first and then use that as the selector:

function category_select() {
     var $this = $(this),
     id = '#' + $this.attr('id') + '_grade'; // calculate ID of element to show

     $('#grade_select')
         .children() // select all children
         .hide() // hide all children
         .filter(id) // select the right one
         .show(); // and show it
}
0

Use the selector #grade_select > div to hide all divs that are immediate children (so that you can have other divs inside them if you like), then filter out the one that you want to show:

$(document).ready(function($){
  $("input[name=category]").click(function(){
    $("#grade_select > div").hide().filter("#" + this.id + "_grade").show();
  });
});
0

demo

jquery code

$("input[type='radio']").click(function() {
    $("#grade_select div").hide();
    $("#" + this.id + "_grade").show();
});​
1
  • @gdoron bruvnic :)) hows it, ha ha neah Thanks for that day man - helped me to stop the bad habit, if you ever came to this part of the world then I will buy you a coffee, <cheers> :P ha ha {cold here though - bit unwell indeed}
    – Tats_innit
    May 20, 2012 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.