单击单选按钮，隐藏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

LIVE DEMO

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

Answer 2

您可以使用toggle()做到这一点：

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

工作小提琴：

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

Answer 3

试试这个：

$("#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 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(); 
}); 

Fiddle

Answer 7

$(document).ready(function(){ 

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

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