text input as radio option

by joplomacedo

HTML

<fieldset class="loginFormFieldset">
                                <legend class="loginFormFieldsetTitle">
                                    Plan details
                                </legend>
                                
                                <!--  number of agents -->
                                <span class="labelText">Number of agents</span>
                                <p class="radioGroup signupRadioGroup agentRadioGroup">
                                    <input checked="checked" class="dnone" id="update_here_and_in_the_label_for_1" type="radio" name="customer[custom_fields][number_agents]" value="1" onclsick="setPrice()"><!--
                                    --><label class="labelAsInput" for="update_here_and_in_the_label_for_1">1</label><!--
                                    --><input class="dnone" id="update_here_and_in_the_label_for_2" type="radio" name="customer[custom_fields][number_agents]" value="2" onsclick="setPrice()"><!--
                                    --><label class="labelAsInput" for="update_here_and_in_the_label_for_2">2</label><!--
                                    --><input class="dnone" id="update_here_and_in_the_label_for_3" type="radio" name="customer[custom_fields][number_agents]" value="3" onclisck="setPrice()"><!--
                                    --><label class="labelAsInput" for="update_here_and_in_the_label_for_3">3</label><!--
                                    --><input class="agentTextInput tac" type="text" name="customer[custom_fields][number_agents]" placeholder="+" onchasnge="setPrice()">
                                </p>
                                
                                
                                <!-- monthly/6months/12months -->
                                <span class="labelText">Subscription plan</span>
                                <p class="radioGroup signupRadioGroup...

CSS

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/********
 COMMON TO ALL PAGES
 ********/

 html {
    height: 100%;
 }

body {
    position: relative;
    min-height: 100%; /* sticky footer*/
    padding-bottom: 120px;

    font: 300 15px/1.55 "Source sans pro", helveticaneue, helvetica, arial, sans-serif;
    color: #464646;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: auto;
}


/*TYPOGRAPHY*/
.lvl2Headline {
    margin-bottom: 1.3em;
    font-size: 2.1em;
    font-weight: 500;
}

.standardLvl2Headline {
    margin-bottom: .5em;
}

.lvl2HeadlineLead {
    margin-bottom: 2.6em;
}

.lvl3Headline {
    font-size: 1.1em;
    font-weight: 400;
}

.link {
    color: #3D75CA;
    font-weight: 400;
    border-bottom: 1px dotted;
}

.link:hover {
    border-bottom: 0;
}


/* BUTTONS */
.ctaBtn {
    /*padding: 0.3em 0.9em 0.4em;
    border: 2px solid transparent;*/
    padding: 0.4em 0.9em 0.5em;
    background: #3D75CA;
    font-size: 1.4em;
    font-weight: 500;
    color: white;
   ...

JavaScript

var textInputAsRadioOption = (function () {
  function TextInputAsRadioOption ( $radio_group, $text_input ) {
    this.$radio_group = $radio_group;
    this.$radios = $radio_group.find('input[type="radio"]');
    this.$selected_radio = this.$radios.filter(':checked');
    this.radio_click = false;
    this.$text_input = $text_input;
    
    this.attachEvents();
  }
  
  TextInputAsRadioOption.prototype.$fake_radiosMousedown = function ( e ) {
      this.radio_click = true;
      setTimeout(function () {
        this.radio_click = false; 
      }.bind(this), 25);
    
    if ( this.$text_input.hasClass('is-selected') ) {
      this.$text_input.removeClass('is-selected');
    }
     
    this.$selected_radio = $(e.target).prev();
  };
  
  TextInputAsRadioOption.prototype.$text_inputFocus = function () {
    if ( !this.$text_input.hasClass('is-selected') ) {
      this.$text_input.addClass('is-selected');
      this.$selected_radio.prop('checked', false);
    }
  };
  
  TextInputAsRadioOption.prototype.$text_inputBlur = function () {
    if ( this.radio_click ) {
      this.$text_input.removeClass('is-selected');
    } else if ( !this.$text_input.val().length ) {
      this.$text_input.removeClass('is-selected');
      this.$selected_radio.prop('checked', 'true');
    }
  };
  
  TextInputAsRadioOption.prototype.attachEvents = function () {
    this.$radio_group.on('mousedown', '.labelAsInput', this.$fake_radiosMousedown.bind(this));

      this.$text_input.on({
        'focus': this.$text_inputFocus.bind(this),
        'blur': this.$text_inputBlur.bind(this)
      });
  };
  
  function init() {
    $('.radioGroup').each(function () {
      var $radio_group = $(this),
          $text_input = $radio_group.find('input[type="text"]');
      
      if ( $text_input.length ) {
        new TextInputAsRadioOption( $radio_group, $text_input);
      }
    });
  }
  
  return init;
})();

$(function () {
  textInputAsRadioOption();
});