Question

This code is working but there must be a better way to do this in the Jquery script.

Here’s my radio button

<%= f.radio_button :losstype, "Cash", :id => 'lc' %>Cash
<%= f.radio_button :losstype, "Asset",:id => 'rb' %>Asset 
<%= f.radio_button :losstype, "Supplies", :id => 'ab' %>Supplies

And heres my hidden bit right now.

<% if @assetloss.losstype == "Asset"   %>
 <div id="asset_list" style="display: show;">
<% else %>
 <div id="asset_list" style="display: none;">
<% end >
A drop down list to be shown
</div>

And the Jquery part

$j(document).ready(function(){ 
    $j("input[id='lc']").change(function() {  
    $j("#asset_list").hide();  
  } );
$j("input[id='rb']").change(function() {  
  $j("#asset_list").show("slide");  
} ); 
    $j("input[id='ab']").change(function() {  
  $j("#asset_list").hide(); 
} );
} );

Rendered Markup on checked radio button

<input checked="checked" id="rb" name="asset_loss[loss_type]" type="radio" value="Asset"/>

While it works, I’m sure there’s a better way to do this, so I would be asking for refactoring help I guess.

Many Thanks in advance

Ed1. I have realized this is a Jquery Question and need it to check that if “input[id=’rb’]” is checked (from db) then $j(“#asset_list”).show(); without needing a change listener

Answer 1

First I would give them all the same name to group them together.

$j("input[name='btnGroupName']").change(function() {  
 if($('#rb').is(':checked')) { 
    $j("#asset_list").show("slide");
  }else{
    $j("#asset_list").hide();
  }
});