如果在jquery中选中了单选按钮，如何隐藏和显示div

Question

在wordpress中，我为post格式创建了一些元数据，所以当用户点击一个单选按钮或它已经被选中时，元数据就会显示出来。

下面是我尝试过的一些jquery代码，但我不太擅长使用jquery

HTML：

<div id="post-formats-select">
    <input type="radio" id="post-format-0" class="post-format" value="0" name="post_format" />
    <label class="post-format-standard">Standard</label>

    <input type="radio" id="post-format-chat" class="post-format" value="chat" name="post_format" />
    <label class="post-format-chat">Chat</label>

    <input type="radio" id="post-format-gallery" class="post-format" value="gallery" name="post_format" checked="checked" />
    <label class="post-format-gallery">Gallery</label>

    <input type="radio" id="post-format-video" class="post-format" value="video" name="post_format" />
    <label class="post-format-video">Video</label>    
</div>

<div class="meta-box-sortables">
    <div id="inpost_chat_box" class="postbox">
        Chat Box
    </div>    

    <div id="inpost_gallery_box" class="postbox">
        Gallery Box
    </div>

    <div id="inpost_video_box" class="postbox">
        Video Box
    </div>    
</div>

JQuery：

$('#inpost_chat_box, #inpost_gallery_box, #inpost_video_box').hide();

var formats = $('#post-formats-select input');
formats.on('change', function(){
    if( $(this).is(':checked').val() == 'gallery' ) {
        $('#inpost_gallery_box').show();
    }
});

Answer 1

您不能链接.is()，因为它返回的是布尔值，而不是jQuery对象。.is()中没有.val()方法，所以它可能会抛出一个：

未捕获ReferenceError:未定义不是函数

如果你检查你的浏览器控制台。

尝试将条件分解为两个语句，如下所示：

formats.on('change', function(){
    if( this.checked && this.value == 'gallery' ) {
        $('#inpost_gallery_box').show();
    }
});