ラジオボタンの状態に基づいてDIVを表示/非表示にしたいと思います。ラジオボタンの状態でHTML要素の可視性を設定する
ラジオボタンにリスナーを追加して、選択または選択解除したときにリスナーを表示/非表示にすることができます（this回答など）。
ラジオボタンの:checked属性にDivのdisplay属性、$("#myDiv").visibility($("#myRadio").is('checked'));ような何かをバインドする方法はありますか？
言い換えれば、ラジオボタンの状態に表示/可視性をデータバインドできますか？
これはCSSで簡単に行うことができますか？
まあ、それは正確にあなたがあなたの本部HTML要素に何をしたいのかということによって異なります。たとえば以下の
は、事業部の可視性を変更することです例次
$(document).ready(function() {
$("#myRadio").click(function() {
if($(this).is(':checked')){
// if you want to change your Div's css property
$("#myDiv").css("visibility","hidden");
}else{
// Reverting back visibility to visible
$("#myDiv").css("visibility", "visible");
}
});
});
は、事業部の表示を変更することです：
$(document).ready(function() {
$("#myRadio").click(function() {
if($(this).is(':checked')){
// if you want to change your Div's Display None
$("#myDiv").hide();
}else{
// if you want to change your Div's Display BLOCK
$("#myDiv").show();
}
});
});
使用できるjquery onchange e天候のラジオボタンをチェックするスクリプトの上
$(function() {
\t $('input[type=radio]').on('change', function() {
\t $('#mydiv').toggle();
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "mydiv"class = "show-hide"> Hello </div>
<div>
<label>show-hide</label>
<input type="radio" name="show">
</div>を使用できます。相互に排他的なCSSスタイルを同じ要素に追加すると、ソリューションが不必要に複雑になり、トラブルシューティングが難しくなります。確かに、それはうまくいきますが、より複雑なコードに適用すると、このアプローチは非常に素早く髪の毛を手に入れることができます。 –
cssクラスを必要としない場合は、 'toggleClass'の代わりに' toggle'を使うだけです。 –
$('#myRadio').on('click', function(){
if($(this).prop('checked')){
$('#myDiv').show();
} else {
$('#myDiv').hide();
}
});
が
$(document).ready(function() {
$("#myRadio").on("change", function() {
$("#myDiv").css("visibility" ? $(this).is(":checked") ? "visible" : "hidden");
});
});
OR
$('#myRadio').on('change', function(){
if($(this).is(':checked'))
$('#myDiv').show();
else
$('#myDiv').hide();
});
変更は、クリック時よりも技術的に優れているため、既に選択されているラジオボタンをクリックしたときにこのコードを実行しているわけではありません。実際には、それは同じことです。
あなたはプレーンなCSSのソリューションを探している場合は、あなたがthis Question/Answer
をチェックアウトする必要がありますあなたの無線入力は非表示にしたいのdivと同じレベルにする必要があります。
HTML：
<input type="radio" name="d" id="reveal"><label>reveal it</label>
<input type="radio" name="d" id="hideBack"><label>hide it</label>
<div id="email">
<form id="email-form" class="nice" action="" method="post">
<input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
<input type="hidden" name="name" id="id_name_email">
<a class="btn" >Apply</a>
</form>
</div>
CSS：。
#reveal:not(:checked) ~ #email{
display: none;
}
#reveal:checked ~ #email{
display: block;
}
#email{
display: none;
}
'$（ "＃myDiv"）（$（ "＃myRadio"）を切り替える小道具（ 'チェックします'。 ））; ' – Rayon
ボタンの状態が変わるたびに、' myDiv'の可視性が変わるのですか？ – summerbulb
'radio'ボタン' change'イベントでこれをラップする必要があります！ – Rayon