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

Hiding/Showing Fields Based On Radio Selection With simple_form

本文关键字：于单选 选择 字段 显示 simple form 隐藏 使用      更新时间：2023-09-26

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

_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最强的），但我似乎不明白这一点。

编辑：我犯了一些jQuery错误。此外，这里还有一个jsFiddle示例

试试这个。

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

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

相关文章：