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

时间:2013-07-23 18:28:38

标签: javascript radio-button hide

我想在单击一个单选按钮时隐藏我的div,但在我的生活中无法弄明白..这是我的代码:

 <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>

我希望在住宅或公寓或点击时隐藏此div,并在点击修订时显示:

 <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>

感谢任何和所有帮助!谢谢!

2 个答案:

答案 0 :(得分:2)

您可以使用jQuery轻松隐藏元素。

$('#id_of_div').hide()

要在单击单选按钮上执行某些操作,请使用更多jQuery

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

答案 1 :(得分:2)

给你的div一个id:

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

为您的radiobuttons添加onclick功能:

<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)" ...

添加JavaScript函数:

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";
    }
}