基於無線電選擇隱藏/顯示字段與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(); 
}); 

評論如果你有任何問題。