我想基于单选按钮的状态隐藏/显示DIV。通过单选按钮状态设置HTML元素可见性
我知道我可以添加一个听众到单选按钮，并显示/隐藏它，只要它被选中或取消选中（如this答案）。
是否有可以Div的display属性的单选按钮的:checked属性，像$("#myDiv").visibility($("#myRadio").is('checked'));结合的方法吗？
换句话说 - 我可以将显示/可见性数据绑定到单选按钮的状态吗？
也许这可以在css中轻松完成？
嗯，这取决于那正是你想要做你的事业部HTML元素的内容：
下面的例子是改变div的可见性：
$(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的显示：
$(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用下面的CSS
$(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类，你可以使用'toggle'而不是'toggleClass' –
$('#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
您的无线输入必须在同一水平，你要隐藏的股利。
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