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

Question

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

我知道我可以向单选按钮添加一个监听器，并在它被选中或取消选中时显示/隐藏它（如this 答案）。

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

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

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

Answer 1

嗯，这取决于你想用你的 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();

        }
    });

});

Answer 2

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

以上脚本将检查每次点击时是否点击天气单选按钮

Answer 3

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

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

Answer 4

如果您正在寻找纯 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;
}

Fiddle

Answer 5

使用可以使用jquery onchange 事件和下面的css

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