How to hide and show a <tr> on form load in jquery?

Question

Following is my code snippet from smarty template.

<input type="radio" name="newsletter_call_to_action_status" value="1" checked='checked' onclick="select_option(this.value);" {if $data.newsletter_call_to_action_status=='1' } checked {/if}>Yes
<input type="radio" name="newsletter_call_to_action_status" value="0" onclick="select_option(this.value);" {if $data.newsletter_call_to_action_status=='0' } checked {/if}>No
<tr id="action_link_no" {if $data.newsletter_call_to_action_status=='1' }style="display:;" {else}style="display:none;" {/if}>
    <td colspan="2">&nbsp;</td>
</tr>
<tr class="action_link_yes" height="30">
    <td align="right" width="300">
        <label><b>{'Enter call to action text'|signal_on_error:$error_msg:'newsletter_call_to_action_text'}</b>  <strong style="color:red">*</strong>
        </label>
    </td>
    <td>&nbsp;
        <input type="text" name="newsletter_call_to_action_text" id="newsletter_call_to_action_text" value="{$data.newsletter_call_to_action_text}" maxlength="50" class="inputfield">
    </td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
</tr>
<tr class="action_link_yes" height="30">
    <td align="right" width="300">
        <label><b>{'Enter call to action link'|signal_on_error:$error_msg:'     newsletter_call_to_action_link'}</b>  <strong style="color:red">*</strong>
        </label>
    </td>
    <td>&nbsp;
        <input type="text" name="newsletter_call_to_action_link" id="newsletter_call_to_action_link" value="{$data.newsletter_call_to_action_link}" class="inputfield">
    </td>
</tr>

Now, on form load, if newsletter_call_to_action_status == 1 then it should show the tr with class=action_link_yes , and hide the tr using class=action_link_no when the value is 0 .

How can I achieve this?

Answer 1

<input type="radio" value="1" checked="checked">YES</input>
<input type="radio"  value="0">NO</input>
<table class="tbl">
    <tr class="action-yes">
        <td>Here is stuff to show on yes</td>
    </tr>
    <tr class="action-no">
        <td>stuf to show on no</td>
    </tr>
</table>


$(document).ready(function () {
    var status = $('input:radio:checked').val();
    if (status == 1) {
        $('table tr.action-yes').show();
        $('table tr.action-no').hide();
    } else {
        $('table tr.action-yes').hide();
        $('table tr.action-no').show();
    }
});

Demo: http://jsfiddle.net/zeewon/TKZn6/

Answer 2

$('#form').load(function(){
if(newsletter_call_to_action_status == 1) {
  $('.class=action_link_yes').show();
  $('.class=action_link_no').hide();
}
else {
  $('.class=action_link_yes').hide();
  $('.class=action_link_no').show();
}
});

Answer 3

Try this:

$(document).ready(function(){

$(".radio").change(function(){

if($(this).val() == '1')

{
    $(".action_link_no").hide();

    $(".action_link_yes").show();

}

else if($(this).val() == '0')

{

    $(".action_link_yes").hide();

    $(".action_link_no").show();

}

});

});

here .radio is the class of radio buttons