CODEWITHSUNDEEP
javascriptjquery
why
why

Reputation: 24851

How to pass js code to string gracefully?

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.

Upvotes: 0

Views: 87

Answers (6)

Tats_innit
Tats_innit

Reputation: 34107

demo

jquery code

$("input[type='radio']").click(function() {
    $("#grade_select div").hide();
    $("#" + this.id + "_grade").show();
});​

Upvotes: 0

gdoron
gdoron

Reputation: 150293

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

Live DEMO

Upvotes: 1

Parth Thakkar
Parth Thakkar

Reputation: 5475

<script type="text/javascript">
    $(document).ready(function($){
        $( "input[name='category']" ).bind( "click", function() {
            $("#grade_select div").hide().parent().find( '#' + this.id + "_grade" ).show();
        });
    });
</script>

Upvotes: 4

Guffa
Guffa

Reputation: 700650

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();
  });
});

Upvotes: 0

Ja͢ck
Ja͢ck

Reputation: 173642

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
}

Upvotes: 0

Naveed
Naveed

Reputation: 42143

Try:

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

Demo

Upvotes: 2

Related Questions