單擊單選按鈕，隱藏div

Question

當有人點擊表格上的單選按鈕（第二個單選按鈕）時，我試圖隱藏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，所以我非常感謝能得到的任何幫助。 謝謝！

Answer 1

現場演示

$(':radio[name=delivery]').change(function(){ // Or simply: $("[name=delivery]")
    $('.formInput').toggle();
});

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

Answer 3

你可以使用toggle()來做到這一點：

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

工作小提琴：

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

Answer 4

我假設jQuery庫沒問題，因為你用jQuery標記了這個，所以這里是jQuery響應：

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

一定要包含jQuery庫。

Answer 5

你可以這樣做：

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

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

演示： http ： //jsfiddle.net/darkajax/jCuk9/

Answer 6

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

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

小提琴

Answer 7

$(document).ready(function(){

     $('#button1').click(function(event) { 
     $('#hide').hide();
});

    $('#button2').click(function(event) { 
    $('#hide').show();
    });  
});