使用 simple_form 隐藏/显示基于单选框的字段

Question

我有一个表单，我需要用户选择（使用单选按钮）一个选项，该选项将确定其下方的下一个表单字段。在这种情况下，他们的帖子可以是帖子或帖子的修订。因此，选择“帖子”将显示标题字段（为帖子命名），选择“修订”将显示现有帖子的选择列表以供选择（标题将被继承）。

_form.html.erb

<!--Form inputs-->

<%= f.collection_radio_buttons :is_revision, [[false, 'Post'] ,[true, 'Revision']], :first, :last %>
<%= f.input :revision_id, collection: @originals, :input_html => {:id => 'revision'} %>
<%= f.input :title, :input_html => { :maxlength => '50', :placeholder => 'Title', :id => 'title'} %>

<!--Javascript-->

<script type="text/javascript">
$('input[name="post[is_revision]"]').on("change", function(){
    if ( $("#post_is_revision_true").attr("checked")){
        $("#title").hide();
        $("#revision").show();
    }
    if ( $("#post_is_revision_false").attr("checked")){
        $("#revision").hide();
        $("#title").show();
    }
});
</script>

我应该提到，这在隐藏和显示一个字段时效果很好，但在选择另一个单选按钮时没有任何变化。我觉得逻辑是正确的（虽然我不是最擅长 JS）但我似乎无法理解。

Answer 1

编辑：我犯了一些 jQuery 错误。另外，here is a jsFiddle example

试试这个。

$('input[name="post[is_revision"]').change(function() {
    var selected = $('input:checked[name="post[is_revision]"]').val();
    if(selected == 'revision') {
        $('#title').hide();
        $('#revision').show();
    } else if(selected == 'new_post') {
        $('#revision').hide();
        $('#title').show();
    }
});

另一种方法，更小但更混乱：

$('input[name="post[is_revision"]').change(function() {
    var is_revision = $('input:checked[name="post[is_revision]"]').val() == "revision";

    $('#title').toggle(!is_revision);
    $('#revision').toggle(is_revision);
});

如果总是首先选择一个，您可以将其浓缩为：

$('input[name="post[is_revision"]').change(function() {
    $('#title').toggle();
    $('#revision').toggle();
});

或用于踢球、咯咯笑和滑行：

$('input[name="post[is_revision"]').change(function() {
    $('#title').slideToggle();
    $('#revision').slideToggle();
});

如果您有任何问题，请发表评论。