Question

When a user clicks the Upload Prize radio button, jQuery should show #upload_prize_file_box input. When a user clicks the Provide Access radio button, pa_block should be shown.

When I try to do that using the code below, the page doesn’t respond.

HTML:

<tr>
 <td id="optBox">
    <input name="opt-radio" type="radio" id="upload_prize" value="upload_prize" checked="checked" />
    <label for="upload_prize">Upload Prize</label>
    <input name="opt-radio" type="radio" id="provide_access" value="provide_access" />
    <label for="provide_access">Provide Access</label>
 </td>
</tr>
<tr>
 <td id="upload_prize_file_box" colspan="2" style="display:none;">
     <input type="file" name="upload_prize_file" id="upload_prize_file" />
 </td>
</tr>
<tr>
 <td height="160" colspan="2" id="pa_block" style="display:none;">
     <table width="100%" border="0">
     <tr>
       <td width="32%">URL</td>
       <td width="68%"><input type="text" name="pa_url" id="pa_url" /></td>
     </tr>
     <tr>
       <td>Username</td>
       <td><input type="text" name="pa_username" id="pa_username" /></td>
     </tr>
     <tr>
       <td>Password</td>
       <td><input type="text" name="pa_password" id="pa_password" /></td>
     </tr>
     <tr>
       <td>Is your prize attached to an affiliate program in Clickbank?</td>
       <td>
            <input type="radio" name="radio" id="pa_yes" value="pa_yes" />
            <label for="pa_yes">Yes</label>
            <input type="radio" name="radio" id="pa_no" value="pa_no" />
            <label for="pa_no">No</label>
       </td>
      </tr>
      <tr>
        <td colspan="2">
            <textarea name="pa_textarea" id="pa_textarea" cols="45" rows="5"></textarea>
        </td>
       </tr>
       <tr>
          <td height="29" colspan="2">Enter hoplink with our affiliate code, which is: iasst</td>
       </tr>
</table>
</td>

jQuery:

$(document).ready(function() {
    if("#optBox input[type=radio]").click(function(){
        if($("input[type=radio]:checked","optBox").val()=='upload_prize'){
            $("#upload_prize_file_box").show();
            $("#pa_block").css('display','none');
        }
        if($("input[type=radio]:checked","optBox").val()=='provide_access'){
            $("#pa_block").show();
            $("#upload_prize_file_box").css('display','none');
        }
    });
});

http://jsfiddle.net/GSXQ5/

How can I activate my radio buttons?

Answer 1

Here, I fixed it for you: http://jsfiddle.net/GSXQ5/29/.

You missed the <table> tag, and the $ symbol several times; in the second line of your jQuery code, you have typed if instead of $.