Radyo öğesi durumuna göre HTML öğesi görünürlüğünü ayarlayın

Question

Bir radyo düğmesinin durumuna bağlı olarak bir DIV saklamak/göstermek istiyorum.

Radyo dinleyicisine bir dinleyici ekleyebileceğimi ve seçildiğinde veya seçilmediğinde (this yanıtı gibi) onu göster/gizleyebileceğimi biliyorum.

radyo düğmesinin :checked öznitelik için Div 'ın display niteliği, $("#myDiv").visibility($("#myRadio").is('checked')); gibi bir şey bağlamak için bir yolu var mı? Başka bir deyişle, ekranı/görünürlüğü radyo düğmesinin durumuna veri ile bağlayabilir miyim?

Belki bu css'de kolayca yapılabilir mi?

Answer 1

Eh, bağlı olduğu tam olarak ne Div HTML Öğesi'nden ne yapmak istediğini: Örneğin ardından

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

     } 
    }); 

}); 

Div en Ekran değiştirmektir: Örneğin ardından

değiştirmeye Div en Görünürlük olduğunu :

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

     } 
    }); 

}); 

Answer 2

Kullanım e Onchange jquery kullanabilirsiniz Hava radyo düğmesini kontrol edecek komut Üstü

$(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>

Answer 3

$('#myRadio').on('click', function(){ 
    if($(this).prop('checked')){ 
     $('#myDiv').show(); 
    } else { 
     $('#myDiv').hide(); 
    } 
}); 

Answer 4

$(document).ready(function() { 
    $("#myRadio").on("change", function() { 
     $("#myDiv").css("visibility" ? $(this).is(":checked") ? "visible" : "hidden"); 
    }); 

}); 

VEYA

$('#myRadio').on('change', function(){ 
    if($(this).is(':checked')) 
     $('#myDiv').show(); 
    else 
     $('#myDiv').hide(); 
}); 

tıklayın her tıklandığında ya da olmasın css aşağıdaki havalandırma

Değişiklik, teknik olarak tıklandığında teknik açıdan daha iyidir, bu yüzden bu kodu, daha önce seçmiş olduğunuz bir radyo düğmesi tıklatıldığında çalıştırmıyorsunuz. Pratik olarak, aynı şey. Eğer düz bir CSS çözümü arıyorsanız

Answer 5

, sen this Question/Answer

Sizin radyo giriş gizlemek istediğiniz div ile aynı seviyede olması gerekmektedir kontrol etmeliyiz.

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

Fiddle