javascript - 使用 simple_form 基于 radio 选择隐藏/显示字段

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

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