Как показать/скрыть DIV, щелкнув переключатель?

По умолчанию оба DIV должны быть скрыты. Выбрав радиокнопку, необходимо отобразить соответствующий DIV (после его #ID).Как показать/скрыть DIV, щелкнув переключатель?

Ниже мой код:

<input type="radio" name='thing' value='valuable' id="bank"/> 
<input type="radio" name='thing' value='valuable' id="school"/> 

<div id="bank" class="none">Bank</div> 
<div id="school" class="none">School</div> 

<style> .none { display:none; } </style>

Но мы должны показать только один DIV в то время. Является ли это возможным?

источник

2013-07-03 Umarfaruk M

вызова скрыть() из JQuery для OnChange события – rajansoft1

Не используйте 2 одинаковые идентификаторы на одной странице. –

как @KamilT сказал, что ваш HTML недействителен здесь –

Вы можете использовать атрибут data-* здесь нравится:

HTML

<input type="radio" name='thing' value='valuable' data-id="bank" /> 
<input type="radio" name='thing' value='valuable' data-id="school" />

$(':radio').change(function (event) { 
    var id = $(this).data('id'); 
    $('#' + id).addClass('none').siblings().removeClass('none'); 
});

WORKING FIDDLE DEMO

источник

2013-07-03 11:04:48

Он работает. Спасибо :) –

Попробуйте это:

HTML:

<input type="radio" name='thing' value='valuable' id="bank"/> 
<input type="radio" name='thing' value='valuable' id="school"/> 

<div id="bank_div" class="none choice">Bank</div> 
<div id="school_div" class="none choice">School</div>

JS:

$("input[type=radio]").click(function(event) { 
    var myId = this.id; 
    var targetId = myId + "_div"; 
    $("div.choice:not(#" + targetId + ")").addClass(".none"); 
    $("#" + targetId).removeClass(".none"); 
});

источник

2013-07-03 10:57:59

Это не показывает соответствующий div по щелчку, но скрывает его – Amani

Хорошо заметен. Я обновил код –

<input type="radio" name='thing' value='valuable' id="bank"/> 
<input type="radio" name='thing' value='valuable' id="school"/> 

<div id="bankDiv" class="none">Bank</div> 
<div id="schoolDiv" class="none">School</div> 

<style> .none { display:none; } </style>

JQuery:

$(function() { 
    $('input[type="radio"]').change(function() { 
     var rad = $(this); 
     ('input[type="radio"]').addClass('none'); 
     if (rad.is(':checked')) 
      ('#' + rad.attr('id') + 'Div').removeClass('none'); 
    }); 
});

источник

2013-07-03 11:00:11 Amani

Прежде всего, вам это не лучший подход, который вы используете тот же идентификатор для 2 или более элементов управления ...

Укажите уникальный идентификатор для каждого элемента.

использовать этот код ...

<input type="radio" name='thing' value='valuable' id="bank"/> 
<input type="radio" name='thing' value='valuable' id="school"/> 

<div id="radio_divs"> 
<div id="bank_div" class="none">Bank</div> 
<div id="school_div" class="none">School</div> 
</div> 
<style> .none { display:none; } 
.view { display:block; } 
</style>

теперь использовать OnClick на кнопке радио ...

jQuery("input[type=radio]").click(function(event) { 
    jQuery('#radio_divs').children('div').each(function() { 
     jQuery(this).addClass(".none"); 
    }); 
    jQuery("#" + this.id + "_div").addClass(".view"); 
});

Это, безусловно, работает, и сделать его видимым только один DIV и отдыха дивы это сделать невидимый ....

источник

2013-07-03 11:08:51

Это мое решение с помощью JQuery:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 

<script> 
function showBank() 
{ 
$("#bankDIV").removeClass("none"); 
$("#bankDIV").addClass("showDIV"); 

//Make sure schoolDIV is not visible 
$("#schoolDIV").removeClass("showDIV"); 
$("#schoolDIV").addClass("none"); 
} 

function showSchool() 
{ 
$("#schoolDIV").removeClass("none"); 
$("#schoolDIV").addClass("showDIV"); 

//Make sure bankDIV is not visible 
$("#bankDIV").removeClass("showDIV"); 
$("#bankDIV").addClass("none"); 
} 
</script> 


</head> 
<body> 

<input type="radio" name='thing' value='valuable' id="bank" onclick="showBank()"/> 
<input type="radio" name='thing' value='valuable' id="school" onclick="showSchool()"/> 

<div id="bankDIV" class="none">Bank</div> 
<div id="schoolDIV" class="none">School</div> 

<style> 
.none { display:none; }, 
.showDIV { display:block; } 
</style> 

</body> 
</html>

Убедитесь, что в вашем коде не указаны идентификаторы удвоения. И одновременно видно только один DIV.

С уважением, Alex

источник

2013-07-03 11:34:55

вы можете попробовать это также,

<input type="radio" name='thing' value='valuable' id="bank"/> <input type="radio" name='thing' value='valuable' id="school"/> 

<div id="bankDiv" class="none">Bank</div> <div id="schoolDiv" class="none">School</div>

CSS

.none { display:none; }

JQuery

$(function() { 
    $('input[type="radio"]').change(function() { 
     var rad = $(this).attr('id');   
      $('#' + rad + 'Div').show(); 
      $('#' + rad + 'Div').siblings('div').hide(); 
    }); 
});

проверить эту скрипку : http://jsfiddle.net/Kritika/f2UKj/

источник

2013-07-12 16:32:32 Pbk1303

Это можно сделать с помощью CSS.

Примечание: <div> s должны быть общими братьями и сестрами элемента <input>.

HTML:

<form> 
    <input type="radio" name="action" value="green"> Green 
    <input type="radio" name="action" value="red"> Red 
    <div id="green" class="show-hide">I am the green div.</div> 
    <div id="red" class="show-hide">I am the red div.</div> 
</form>

CSS:

#green { 
    display: none; 
    padding: 10px; 
    background-color: #6f6; 
} 

#red { 
    display: none; 
    padding: 10px; 
    background-color: #f44; 
} 

input[value="green"]:checked ~ #green { 
    display: block; 
} 

input[value="red"]:checked ~ #red { 
    display: block; 
}

JSFiddle: http://jsfiddle.net/Ly56w/

источник

2014-06-16 02:28:16

Это работает для меня: функция

<div class="form-group"> 
     <label>Please select Your Payment Option:</label><br> 
     <input id='watch-me1' name='payment' type='radio' class='show-me1' value="Cash On Delivery" checked /> Cash On Delivery<br /> 
     <div id='show-me1' style='display:none;border:1px solid black;color:red;'>Not Available At This Moment!</div> 

     <input id='watch-me2' name='payment' type='radio' class='show-me2' value="Bkash/Rocket Mobile" /> Bank<br /> 
     <div id='show-me2' style='display:none;border:1px solid black;'>Not Available At This Moment!</div> 

     <input id='watch-me3' name='payment' type='radio' class='show-me3' value="Credit/Debit Card" /> Credit/Debit Card<br /> 
     <div id='show-me3' style='display:none;border:1px solid black;'>Not Available At This Moment!</div> 

     <input id='watch-me4' name='payment' type='radio' class='show-me4' value="Paypal" /> Paypal<br /> 
     <div id='show-me4' style='display:none;border:1px solid black;'>Not Available At This Moment!</div> 
    <script> 
      $(function(){ 
      $(':radio').click(function() { 
      $('#' + $(this).attr('class')).fadeIn().siblings('div').hide(); 
      }) 
     .filter(':checked').click(); 
      }); 
    </script> 

    </div>

источник

2017-07-15 07:16:10

Некоторые дополнительные объяснения об этом ответе на код, вероятно, будут полезны. – Pyves

Как показать/скрыть DIV, щелкнув переключатель?

ответ

Смежные вопросы