How to use radio button checked or clicked property in my case

Question

Hi guys, i am using Rails 3.2.13. I had used below script in my view file. If someone click on ownertype Other, div with id=group_user_id will open and i will save these operation at last. Till now it is fine when i am using 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 code

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

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

});

Now i am using template css for radio buttons, after that it is not working. Below are the codes for your reference.

In this case, for radio button class square-green single-row is used. And Rails radio button is hidden although i have provided f.radio_button and passed proper id on that.

<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>

I have used following js and css.

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

In this case when we are using radio button from template, how to manage radio button clicked, checked and other properties. Please provide some solution.

Answer 1

I have used ruby gem and some javascript logic to hide and show the div. This script really helpful to me.

In Gemfile place the code.

gem 'icheck-rails'

With the help of this gem, we can provide class easily to radio button or checkbox as below:

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

Javascript logic

<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>