Скрыть / показать Div на выбор радио - PullRequest
1 голос
/ 26 января 2012

Я хотел бы скрыть / показать div на основе радио-выбора.

-На странице загрузки div скрыт и выбрано радио "да".

-Если пользователь выберет радио "нет", появится div.

-Если пользователь затем перепроверяет «да», div снова будет скрываться.

Может ли кто-нибудь показать мне, как это будет работать?

HTML:

<table width="450px" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="200px" style="padding-top:3px; padding-left:3px;"><strong>Deliver Immediately?</strong>
    <input type="radio" name="imm" id="delivernow" checked="true" />Yes
    <input type="radio" name="imm" id="deliverlater" />No
    </td>   
    <td width="140px">       
            <div name="datediv">
                <label for="date">Select date:</label>
                <input type="Text" id="date" maxlength="25" size="25"/>
                <img src="images/cal.gif" onclick="javascript:NewCssCal('date','ddMMyyyy','arrow',true,'12','','future')" style="cursor:pointer"/>
            </div>
    </td>       
    </tr>
</table

Ответы [ 2 ]

0 голосов
/ 26 января 2012

jQuery делает это довольно просто.Вы можете добавить функцию щелчка в группу радиостанций (в этом случае выберите, используя имя " imm ") и проверить идентификатор радиокнопки, которая была нажата так:* Вот живой пример jsfiddle http://jsfiddle.net/h9H29/

РЕДАКТИРОВАТЬ: Вот jQuery включает код для вас

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // We place your page code here
    $("input[name='imm']").click(function(){
        if($(this).attr("id") == "deliverlater"){
            $("#datediv").show();
        }else{
            $("#datediv").hide();   
        }
    });
  });
</script>
0 голосов
/ 26 января 2012

Как то так? Вам нужно будет загрузить JQuery.

$(function(){
    $("div[name='datediv']").hide();
    $("#delivernow").add("#deliverlater").change(function(){
        $("div[name='datediv']").fadeToggle();
    });

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...