在我的情况下如何使用单选按钮选中或单击的属性

Question

嗨，大家好，我正在使用Rails 3.2.13。 我在查看文件中使用了以下脚本。 如果有人单击所有者类型“其他”，则id = group_user_id的div将打开，最后我将保存这些操作。 到现在为止，当我使用f.radio_button时，一切都很好。

<div class="form-group">
  Owner:
  <%= f.radio_button :owner_type,"Self", :id=>"self-group", :checked =>true %>
  Self
  <%= f.radio_button :owner_type,"Other",:id=>"other-group" %>
  Others
</div>

<div id="group_user_id" class="form-group">
  <span>
        <%= text_field_tag "account_id", nil, :id => "autocomplete_text", :class => "form-control", :placeholder => "Account Id" %>
      </span> 
</div> 

JavaScript代码

<script>
$(document).ready(function() {
 $("#group_user_id").hide();
 $("#self-group").prop("checked", true);

$("#other-group").click(function() {
  $("#group_user_id").show();
});

}）;

现在我正在使用模板css的单选按钮，之后它不起作用。 以下是供您参考的代码。

在这种情况下，对于单选按钮类，使用正方形绿色的单行。 尽管我提供了f.radio_button并在其上传递了正确的ID，但Rails单选按钮是隐藏的。

<div class="row">
    <div class="col-sm-2">
      <div class="text-green" style="margin-top: 9px; font-size: 18px;">
        Owner
      </div>
    </div>

    <div class="col-sm-2">
      <div class="icheck">
        <div class="square-green single-row">
          <div class="radio">
            <%= f.radio_button :owner_type,"Self", :id=>"self-group", :checked =>true %>
            <label>Self</label>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-2">
      <div class="icheck">
        <div class="square-green single-row">
          <div class="radio">
            <%= f.radio_button :owner_type,"Other",:id=>"other-group" %>
            <label>Others </label>
          </div>
        </div>
      </div>
    </div>
  </div>

我已经使用以下js和css。

<%= stylesheet_link_tag "css/iCheck/skins/square/green.css" %>
<%= javascript_include_tag "js/iCheck/jquery.icheck.js", "js/icheck-init.js" %>

在这种情况下，当我们使用模板中的单选按钮时，如何管理单击，选中和其他属性的单选按钮。 请提供一些解决方案。

Answer 1

据我了解，您需要在radio_button_tag中输入类名称。

radio_button_tag的格式应如下所示：

radio_button_tag（名称，值，已选中=否，选项= {}）

试试这个：

<%= f.radio_button :owner_type,"Self", :id=>"self-group", :checked =>true, :class=> 'class-name' %>

这将允许class属性

:checked=>true表示默认情况下它将检查单选按钮。

Answer 2

我已经使用ruby gem和一些javascript逻辑来隐藏和显示div。 这个脚本对我真的很有帮助。

在Gemfile中放置代码。

gem 'icheck-rails'

借助此gem，我们可以轻松地为单选按钮或复选框提供类，如下所示：

<%= f.radio_button :owner_type, "Self", :id=>"self-group", :class => 'icheck-me', "data-skin"=>'square', "data-color"=>'green' %>

Javascript逻辑

<script>
   $(document).ready(function () {
   $('input').on('ifClicked', function (event) {
     var value = $(this).val();
     if (value == "Other") {
       $("#group_user_id").show(); 
      }
      else if (value == "Self") {
        $("#group_user_id").hide();
      }
    });
 });
</script>