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

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

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

工作小提琴：

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

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

我假设 jQuery 库没问题，因为你用 jQuery 标记了它，所以这里是 jQuery 响应：

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

一定要包含 jQuery 库。

Answer 4

LIVE DEMO

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

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