4

誰かがフォームのラジオ ボタン (2 番目のラジオ ボタン) をクリックしたときに div を非表示にしようとしていますが、最初のラジオ ボタンをクリックすると、div が元に戻ります (トグル)。これが私の作業コードです: http://jsfiddle.net/NKr7M/

必要に応じて、HTML を次に示します。

<div class="grid howAnswer">
    <div class="col-1">
        <div class="button-left">
            <img src="http://i.imgur.com/RVmh2rz.png" />

            <input checked="checked" type="radio" id="id_delivery_0" value="chat" name="delivery" onclick="toggle(this)" />
        </div><!-- .button-left -->

        <div class="text-area top-text-area">
            <label for="id_delivery_0">
                AnswerChat By Appointment (Fastest)
            </label>
        </div><!-- .text-area -->
    </div><!-- .col-1 -->

    <div class="col-1">
        <div class="button-left" style="margin-left: 15px;">
            <img src="http://i.imgur.com/8J0SEVa.png" />

            <input type="radio" id="id_delivery_2" value="email" name="delivery" onclick="toggle(this)" />
        </div><!-- .button-left -->

        <div class="text-area bottom-text-area">
            <label for="id_delivery_2">
                AnswerMail ASAP (Within 1-2 days)
            </label>
        </div><!-- .text-area -->
    </div><!-- .col-1 -->
</div><!-- .grid -->

<!-- THIS IS WHAT I WANT TO HIDE -->
<div class="formInput">
    <p>Let's try and hide this div</p>
</div><!-- .formInput -->

CSSと同様に：

/* General Declarations */
body { font-family: Arial, Helvetica, sans-serif; }

ul li { list-style: none; }

/* Form */
.col-1 li.howDoPadding { padding-bottom: 10px!important; }

.byAppointment { margin: 0 0 -4px 10px;}

.offlineForm .lightBlueText { 
    color: #80A9BD; 
    display: inline;
}

/* Grid */
*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid:after {
    clear: both;
    content: "";
    display: table;
}

.grid.howAnswer > div.col-1 {
    padding-left: 90px;
    position: relative;
}

.grid.howAnswer .button-left {
    width: 80px;
    position: absolute;
    margin-left: 20px;
    left: 0;
    top: 0;
}

.button-left img { margin-right: -5px; }

.top-text-area { margin: 15px 0 10px; }

.bottom-text-area { margin: 10px 0 15px; }

.button-left { margin: 10px 0; }

/* Grid Gutters */
[class*='col-'] {
    float: left;
    padding-right: 20px;
}

[class*='col-']:last-of-type { padding-right: 0; }

.col-1 { width: 100%; }

私は JavaScript にあまり精通していないので、できる限りの助けをいただければ幸いです。ありがとう！

4

7 に答える 7

5

LIVE DEMO

$(':radio[name=delivery]').change(function(){ // Or simply: $("[name=delivery]")
    $('.formInput').toggle();
});
于 2013-04-12T18:11:54.527 に答える
2

これを試して：

$("#id_delivery_0").on("change",function(){
    if($(this).prop("checked"))
       $(".formInput").hide();     
});

$("#id_delivery_2").on("change",function(){
    if($(this).prop("checked"))
       $(".formInput").show();     
});

jsFiddle : http://jsfiddle.net/hescano/NKr7M/3/

于 2013-04-12T18:09:04.730 に答える
1

あなたはtoggle()それを行うために使用することができます:

$('#id_delivery_0').on("click", function(){
   $(".formInput").hide();
});
$('#id_delivery_2').on("click", function(){
   $(".formInput").show();
});

ワーキングフィドル：

http://jsfiddle.net/NKr7M/4/

于 2013-04-12T18:07:54.297 に答える
0

これにjQueryのタグを付けたので、jQueryライブラリは大丈夫だと思います。jQueryの応答は次のとおりです。

$(document).ready(function() {
    $("#id_delivery_0").click(function() {
        $(".formInput").show();
    });
    $("#id_delivery_2").click(function() {
        $(".formInput").hide();
    });
});

jQuery ライブラリも必ず含めてください。

于 2013-04-12T18:11:16.577 に答える
0

次のようなことができます：

$('#id_delivery_2').click( function(){
   $('.formInput').hide();
});

$('#id_delivery_0').click( function(){
      $('.formInput').show();
});

デモ: http://jsfiddle.net/darkajax/jCuk9/

于 2013-04-12T18:12:45.233 に答える
0 
$("#id_delivery_0").on('click',function(){
      $(".formInput").find('p').show();
});

$("#id_delivery_2").on('click',function(){
      $(".formInput").find('p').hide();
});

フィドル

于 2013-04-12T18:13:02.117 に答える