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

试试这个：

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

Fiddle

Answer 7

$(document).ready(function(){

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

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

单击单选按钮，隐藏div

7 个答案: