通过单选按钮状态设置HTML元素的可见性

Set HTML element visibility by radio button state

本文关键字：元素 可见性 HTML 设置 单选按钮 状态      更新时间：2023-09-26

我想根据单选按钮的状态隐藏/显示DIV。

我知道我可以在单选按钮中添加一个监听器，并在选中或未选中时显示/隐藏它（就像这个答案）。

有没有一种方法可以将Div的display属性绑定到单选按钮的:checked属性，比如$("#myDiv").visibility($("#myRadio").is('checked'));？

换句话说，我可以将显示/可见性数据绑定到单选按钮的状态吗？

也许这可以在css中轻松完成？

好吧，这取决于你想对你的div 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();
        }
    });
});

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

或

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

从技术上讲，"更改"比"单击"更好，因此当已经选择的单选按钮单击时，您不会运行此代码。实际上，这是一回事。

如果您正在搜索纯CSS解决方案，您应该查看此问答

您的单选输入需要与要隐藏的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;
}

Fiddle

Use可以使用带有以下css 的jquery onchange事件

$(function() {
	$('input[type=radio]').on('change', function() {
  	$('#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>

相关文章：