使用Javascript单击单选按钮时隐藏DIV

Question

I want to hide my div when a radio button is clicked, but cannot figure it out for the life of me.. Here is my code:

 <li>
     Residential&nbsp;&nbsp;&nbsp;
     <input type="radio" name="fee" id="residential" class="app_fee"
            value="<?php echo "$applicationFee_residential" ?>"
            onChange="mech_application.fee1.value = eval(mech_application.residential.value)"
            <?php if (isset($_POST['fee'])) {
                      print($residentialYes ? "CHECKED" : "");
            } ?> />
 </li>

 <li>
     Apartment/Commercial
     <input type="radio" name="fee" id="apartment" class="app_fee"
            value="<?php echo "$applicationFee_Apartment" ?>"
            onChange="mech_application.fee1.value = eval(mech_application.apartment.value)"
            <?php if (isset($_POST['fee'])) {
                      print($apartmentNo ? "CHECKED" : "");
            } ?> />
 </li>

 <li>
     Revision&nbsp;
     <input type="radio" name="fee" id="revision" class="app_fee"
            value="<?php echo "$revision" ?>"
            onChange="mech_application.fee1.value = eval(mech_application.revision.value)"
            <?php if (isset($_POST['revision'])) {
                      print($revisionYes ? "CHECKED" : "");
            } ?> />
     <?php if ($_SERVER['REQUEST_METHOD'] == 'POST') {
               if (!isset($_POST['fee'])) {
                   $problem = TRUE;
                   print '<p class="error">Please select the application type</p>';
                   $error = TRUE;
                }
           }?>
  </li>

And I want to hide this div when either Residential or Apartment or clicked, and show it when revision is clicked:

 <div class="revision_hidden">
     Application ID:
     <input type="text" name="revision_application_id" size="12" maxlength="40"
            value="<?php if (isset($_POST['revision_application_id'])) {
                             print htmlspecialchars($_POST['revision_application_id']);
                    } ?>"
            placeholder="Application ID"/>
 </div>

Any and all help is appreciated! Thank you!

Answer 1

You can use jQuery to hide elements real easy.

$('#id_of_div').hide()

For doing something on the radio button being clicked, use more jQuery

$('#id_of_radioBtn').clicked(function(){
   //do something
});

Answer 2

Give your div an id:

<div class="revision_hidden" id="my_div"> ...

Add an onclick function to your radiobuttons:

<input type="radio" name="fee" id="residential" onclick="my_function(this)" ...
<input type="radio" name="fee" id="apartment" onclick="my_function(this)" ...
<input type="radio" name="fee" id="revision" onclick="my_function(this)" ...

And add a JavaScript function:

function my_function(elm)
{
    if(elm == document.getElementById('residential') || elm == document.getElementById('apartment'))
    {
        //document.getElementById('my_div').style.visibility = "hidden";
        document.getElementById('my_div').style.display = "none";
    }
    else if(elm == document.getElementById('revision'))
    {
        //document.getElementById('my_div').style.visibility = "visible";
        document.getElementById('my_div').style.display = "block";
    }
}