Question

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

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

有没有办法将Div的{{1}}属性绑定到单选按钮的display属性，例如:checked？

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

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

Answer 1

嗯，这取决于你想要用你的Div HTML元素做什么：

以下示例是更改Div的可见性：

Started GET "/requirements" for xxx.xxx.xxx.xxx at 2016-04-14 15:45:40 +0300

ActionController::RoutingError (uninitialized constant AddProjectController):
activesupport (3.2.22) lib/active_support/inflector/methods.rb:230:in `block in constantize'
activesupport (3.2.22) lib/active_support/inflector/methods.rb:229:in `each'
activesupport (3.2.22) lib/active_support/inflector/methods.rb:229:in `constantize'
actionpack (3.2.22) lib/action_dispatch/routing/route_set.rb:69:in `controller_reference'
actionpack (3.2.22) lib/action_dispatch/routing/route_set.rb:54:in `controller'
actionpack (3.2.22) lib/action_dispatch/routing/route_set.rb:32:in `call'

以下示例是更改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");

        }
    });

});

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

});

OR

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

＆＃13;

$(function() {
	$('input[type=radio]').on('change', function() {
  	$('#mydiv').toggle();
  })
})

＆＃13;

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

＆＃13;

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

5 个答案: