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


Tags: javascript,html,css,ruby-on-rails,icheck

Problem :

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.



Solution :

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>

    CSS Howto..

    How to enable Stylus url() rewrites

    User agent, how to have diferent css files for diferent devices automaticly

    How do you prevent a CSS animation from rerunning when the display property changes?

    How do I get the element after my horizontal css navigation bar to appear below it?

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    How to apply class only for IE?

    How do I chain an infinite css animation to a one-time css animation?

    How do you extend a Django project root HTML file in project apps?

    How to add a background color to HTML option?

    How do I vertically center align a position:relative element

    How to create readonly textbox-like structure using html (div/span) and css?

    How does one know exact pixel size / relationships between CSS elements?

    How to show only a portion of an image just by using the img tag?

    How to highlight widget title with CSS?

    Including loads of css files and Javascript file - how do I optimize

    Hide/Show menu with increase/decrease of width

    How to add a picture to the top of my webpage?

    How can I make a split-text input placeholder?

    WordPress TwentyTen menu: how to CSS-select sub-menus in a specific position?

    How can I use Rspec to check for the absence of certain CSS classes?

    How to nest classes in css modules and react?

    How to auto width a form element with CSS?

    How to give sentence case to sentences through CSS or javascript? [closed]

    how to make animated 404 gears?

    Showing only one row of items with css independently of users resolution?

    how to keep the css style after inserting a row to table by jquery

    how to create animated background like in smartprogress.do using js,css,html5 [closed]

    CSS: How to make input fill rest of line, with a button on the right?

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    How to layout images in a grid? [closed]