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

Question

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

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

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

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

也许这可以在 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();

        }
    });

});