title: Show textbox when a radio button is clicked
body: <p>I am trying to show a textbox when a radio button within a radio button group is selected. I am using a script named iCheck written by "Damir Sultanov", to change radio buttons in to images. The radio button part works fine but when I add the input textbox and the Jquery functions to deal with the click of a radio button the textbox will not show.</p>
  
  <p>I have a jsfiddle to try and demo what the issue is.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(function() {
      $("#PatTestDate").hide();
    });
  
    $(function() {
      $("#Action1_2").click(function() {
        $("#PatTestDate").show();
        $("#datepicker").datepicker();
      });
    });
  });
  
   $(document).ready(function(){
    $('input').each(function(){
  
   var self = $(this),
      label = self.next(),
      label_text = label.text();
  
      label.remove();
      self.iCheck({
  
        //checkboxClass: 'icheckbox_line',
        radioClass: 'iradio_line',
        insert: '&lt;div &gt;&lt;/div&gt;' + label_text
      });
    });
    
   $('#Action1_2').on('ifChecked', function(event){
     $( "#PatTestDate" ).show();
   });
   
    $('#Action1_1').on('ifChecked', function(event){
     $( "#PatTestDate" ).hide();
   });
    $('#Action1_0').on('ifChecked', function(event){
     $( "#PatTestDate" ).hide();
   });
    
  $(".remove").on('click', function () {
      $(this).parent().prev('label.prfx-row-title').remove();
      $(this).parent().remove();
  });
  
  });
  
  (function($) {
  
    // Cached vars
    var _iCheck = 'iCheck',
      _iCheckHelper = _iCheck + '-helper',
      _checkbox = 'checkbox',
      _radio = 'radio',
      _checked = 'checked',
      _unchecked = 'un' + _checked,
      _disabled = 'disabled',
      _determinate = 'determinate',
      _indeterminate = 'in' + _determinate,
      _update = 'update',
      _type = 'type',
      _click = 'click',
      _touch = 'touchbegin.i touchend.i',
      _add = 'addClass',
      _remove = 'removeClass',
      _callback = 'trigger',
      _label = 'label',
      _cursor = 'cursor',
      _mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);
  
    // Plugin init
    $.fn[_iCheck] = function(options, fire) {
  
      // Walker
      var handle = 'input[type="' + _checkbox + '"], input[type="' + _radio + '"]',
        stack = $(),
        walker = function(object) {
          object.each(function() {
            var self = $(this);
  
            if (self.is(handle)) {
              stack = stack.add(self);
            } else {
              stack = stack.add(self.find(handle));
            }
          });
        };
  
      // Check if we should operate with some method
      if (/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(options)) {
  
        // Normalize method's name
        options = options.toLowerCase();
  
        // Find checkboxes and radio buttons
        walker(this);
  
        return stack.each(function() {
          var self = $(this);
  
          if (options == 'destroy') {
            tidy(self, 'ifDestroyed');
          } else {
            operate(self, true, options);
          }
  
          // Fire method's callback
          if ($.isFunction(fire)) {
            fire();
          }
        });
  
        // Customization
      } else if (typeof options == 'object' || !options) {
  
        // Check if any options were passed
        var settings = $.extend({
            checkedClass: _checked,
            disabledClass: _disabled,
            indeterminateClass: _indeterminate,
            labelHover: true
          }, options),
  
          selector = settings.handle,
          hoverClass = settings.hoverClass || 'hover',
          focusClass = settings.focusClass || 'focus',
          activeClass = settings.activeClass || 'active',
          labelHover = !!settings.labelHover,
          labelHoverClass = settings.labelHoverClass || 'hover',
  
          // Setup clickable area
          area = ('' + settings.increaseArea).replace('%', '') | 0;
  
        // Selector limit
        if (selector == _checkbox || selector == _radio) {
          handle = 'input[type="' + selector + '"]';
        }
  
        // Clickable area limit
        if (area &lt; -50) {
          area = -50;
        }
  
        // Walk around the selector
        walker(this);
  
        return stack.each(function() {
          var self = $(this);
  
          // If already customized
          tidy(self);
  
          var node = this,
            id = node.id,
  
            // Layer styles
            offset = -area + '%',
            size = 100 + (area * 2) + '%',
            layer = {
              position: 'absolute',
              top: offset,
              left: offset,
              display: 'block',
              width: size,
              height: size,
              margin: 0,
              padding: 0,
              background: '#fff',
              border: 0,
              opacity: 0
            },
  
            // Choose how to hide input
            hide = _mobile ? {
              position: 'absolute',
              visibility: 'hidden'
            } : area ? layer : {
              position: 'absolute',
              opacity: 0
            },
  
            // Get proper class
            className = node[_type] == _checkbox ? settings.checkboxClass || 'i' + _checkbox : settings.radioClass || 'i' + _radio,
  
            // Find assigned labels
            label = $(_label + '[for="' + id + '"]').add(self.closest(_label)),
  
            // Check ARIA option
            aria = !!settings.aria,
  
            // Set ARIA placeholder
            ariaID = _iCheck + '-' + Math.random().toString(36).substr(2, 6),
  
            // Parent &amp; helper
            parent = '&lt;div class="' + className + '" ' + (aria ? 'role="' + node[_type] + '" ' : ''),
            helper;
  
          // Set ARIA "labelledby"
          if (aria) {
            label.each(function() {
              parent += 'aria-labelledby="';
  
              if (this.id) {
                parent += this.id;
              } else {
                this.id = ariaID;
                parent += ariaID;
              }
  
              parent += '"';
            });
          }
  
          // Wrap input
          parent = self.wrap(parent + '/&gt;')[_callback]('ifCreated').parent().append(settings.insert);
  
          // Layer addition
          helper = $('&lt;ins class="' + _iCheckHelper + '"/&gt;').css(layer).appendTo(parent);
  
          // Finalize customization
          self.data(_iCheck, {
            o: settings,
            s: self.attr('style')
          }).css(hide);
          !!settings.inheritClass &amp;&amp; parent[_add](node.className || '');
          !!settings.inheritID &amp;&amp; id &amp;&amp; parent.attr('id', _iCheck + '-' + id);
          parent.css('position') == 'static' &amp;&amp; parent.css('position', 'relative');
          operate(self, true, _update);
  
          // Label events
          if (label.length) {
            label.on(_click + '.i mouseover.i mouseout.i ' + _touch, function(event) {
              var type = event[_type],
                item = $(this);
  
              // Do nothing if input is disabled
              if (!node[_disabled]) {
  
                // Click
                if (type == _click) {
                  if ($(event.target).is('a')) {
                    return;
                  }
                  operate(self, false, true);
  
                  // Hover state
                } else if (labelHover) {
  
                  // mouseout|touchend
                  if (/ut|nd/.test(type)) {
                    parent[_remove](hoverClass);
                    item[_remove](labelHoverClass);
                  } else {
                    parent[_add](hoverClass);
                    item[_add](labelHoverClass);
                  }
                }
  
                if (_mobile) {
                  event.stopPropagation();
                } else {
                  return false;
                }
              }
            });
          }
  
          // Input events
          self.on(_click + '.i focus.i blur.i keyup.i keydown.i keypress.i', function(event) {
            var type = event[_type],
              key = event.keyCode;
  
            // Click
            if (type == _click) {
              return false;
  
              // Keydown
            } else if (type == 'keydown' &amp;&amp; key == 32) {
              if (!(node[_type] == _radio &amp;&amp; node[_checked])) {
                if (node[_checked]) {
                  off(self, _checked);
                } else {
                  on(self, _checked);
                }
              }
  
              return false;
  
              // Keyup
            } else if (type == 'keyup' &amp;&amp; node[_type] == _radio) {
              !node[_checked] &amp;&amp; on(self, _checked);
  
              // Focus/blur
            } else if (/us|ur/.test(type)) {
              parent[type == 'blur' ? _remove : _add](focusClass);
            }
          });
  
          // Helper events
          helper.on(_click + ' mousedown mouseup mouseover mouseout ' + _touch, function(event) {
            var type = event[_type],
  
              // mousedown|mouseup
              toggle = /wn|up/.test(type) ? activeClass : hoverClass;
  
            // Do nothing if input is disabled
            if (!node[_disabled]) {
  
              // Click
              if (type == _click) {
                operate(self, false, true);
  
                // Active and hover states
              } else {
  
                // State is on
                if (/wn|er|in/.test(type)) {
  
                  // mousedown|mouseover|touchbegin
                  parent[_add](toggle);
  
                  // State is off
                } else {
                  parent[_remove](toggle + ' ' + activeClass);
                }
  
                // Label hover
                if (label.length &amp;&amp; labelHover &amp;&amp; toggle == hoverClass) {
  
                  // mouseout|touchend
                  label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass);
                }
              }
  
              if (_mobile) {
                event.stopPropagation();
              } else {
                return false;
              }
            }
          });
        });
      } else {
        return this;
      }
    };
  
    // Do something with inputs
    function operate(input, direct, method) {
      var node = input[0],
        state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked,
        active = method == _update ? {
          checked: node[_checked],
          disabled: node[_disabled],
          indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false'
        } : node[state];
  
      // Check, disable or indeterminate
      if (/^(ch|di|in)/.test(method) &amp;&amp; !active) {
        on(input, state);
  
        // Uncheck, enable or determinate
      } else if (/^(un|en|de)/.test(method) &amp;&amp; active) {
        off(input, state);
  
        // Update
      } else if (method == _update) {
  
        // Handle states
        for (var each in active) {
          if (active[each]) {
            on(input, each, true);
          } else {
            off(input, each, true);
          }
        }
  
      } else if (!direct || method == 'toggle') {
  
        // Helper or label was clicked
        if (!direct) {
          input[_callback]('ifClicked');
        }
  
        // Toggle checked state
        if (active) {
          if (node[_type] !== _radio) {
            off(input, state);
          }
        } else {
          on(input, state);
        }
      }
    }
  
    // Add checked, disabled or indeterminate state
    function on(input, state, keep) {
      var node = input[0],
        parent = input.parent(),
        checked = state == _checked,
        indeterminate = state == _indeterminate,
        disabled = state == _disabled,
        callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
        regular = option(input, callback + capitalize(node[_type])),
        specific = option(input, state + capitalize(node[_type]));
  
      // Prevent unnecessary actions
      if (node[state] !== true) {
  
        // Toggle assigned radio buttons
        if (!keep &amp;&amp; state == _checked &amp;&amp; node[_type] == _radio &amp;&amp; node.name) {
          var form = input.closest('form'),
            inputs = 'input[name="' + node.name + '"]';
  
          inputs = form.length ? form.find(inputs) : $(inputs);
  
          inputs.each(function() {
            if (this !== node &amp;&amp; $(this).data(_iCheck)) {
              off($(this), state);
            }
          });
        }
  
        // Indeterminate state
        if (indeterminate) {
  
          // Add indeterminate state
          node[state] = true;
  
          // Remove checked state
          if (node[_checked]) {
            off(input, _checked, 'force');
          }
  
          // Checked or disabled state
        } else {
  
          // Add checked or disabled state
          if (!keep) {
            node[state] = true;
          }
  
          // Remove indeterminate state
          if (checked &amp;&amp; node[_indeterminate]) {
            off(input, _indeterminate, false);
          }
        }
  
        // Trigger callbacks
        callbacks(input, checked, state, keep);
      }
  
      // Add proper cursor
      if (node[_disabled] &amp;&amp; !!option(input, _cursor, true)) {
        parent.find('.' + _iCheckHelper).css(_cursor, 'default');
      }
  
      // Add state class
      parent[_add](specific || option(input, state) || '');
  
      // Set ARIA attribute
      if (!!parent.attr('role') &amp;&amp; !indeterminate) {
        parent.attr('aria-' + (disabled ? _disabled : _checked), 'true');
      }
  
      // Remove regular state class
      parent[_remove](regular || option(input, callback) || '');
    }
  
    // Remove checked, disabled or indeterminate state
    function off(input, state, keep) {
      var node = input[0],
        parent = input.parent(),
        checked = state == _checked,
        indeterminate = state == _indeterminate,
        disabled = state == _disabled,
        callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
        regular = option(input, callback + capitalize(node[_type])),
        specific = option(input, state + capitalize(node[_type]));
  
      // Prevent unnecessary actions
      if (node[state] !== false) {
  
        // Toggle state
        if (indeterminate || !keep || keep == 'force') {
          node[state] = false;
        }
  
        // Trigger callbacks
        callbacks(input, checked, callback, keep);
      }
  
      // Add proper cursor
      if (!node[_disabled] &amp;&amp; !!option(input, _cursor, true)) {
        parent.find('.' + _iCheckHelper).css(_cursor, 'pointer');
      }
  
      // Remove state class
      parent[_remove](specific || option(input, state) || '');
  
      // Set ARIA attribute
      if (!!parent.attr('role') &amp;&amp; !indeterminate) {
        parent.attr('aria-' + (disabled ? _disabled : _checked), 'false');
      }
  
      // Add regular state class
      parent[_add](regular || option(input, callback) || '');
    }
  
    // Remove all traces
    function tidy(input, callback) {
      if (input.data(_iCheck)) {
  
        // Remove everything except input
        input.parent().html(input.attr('style', input.data(_iCheck).s || ''));
  
        // Callback
        if (callback) {
          input[_callback](callback);
        }
  
        // Unbind events
        input.off('.i').unwrap();
        $(_label + '[for="' + input[0].id + '"]').add(input.closest(_label)).off('.i');
      }
    }
  
    // Get some option
    function option(input, state, regular) {
      if (input.data(_iCheck)) {
        return input.data(_iCheck).o[state + (regular ? '' : 'Class')];
      }
    }
  
    // Capitalize some string
    function capitalize(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
  
    // Executable handlers
    function callbacks(input, checked, callback, keep) {
      if (!keep) {
        if (checked) {
          input[_callback]('ifToggled');
        }
  
        input[_callback]('ifChanged')[_callback]('if' + capitalize(callback));
      }
    }
  })(window.jQuery || window.Zepto);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=radio] {
    display: none;
  }
  
  .icheckbox_line,
  .iradio_line {
    position: relative;
    display: block;
    margin: margin: 5px 5 0 0;
    font-size: 16px;
    line-height: 20px;
    color: #666;
    background: #444;
    cursor: pointer;
    height: 20px;
    padding: 5px;
    width: 50px;
    font-family: Tahoma, Geneva, sans-serif;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2)
  }
  
  .icheckbox_line .icheck_line-icon,
  .iradio_line .icheck_line-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 13px;
    height: 20px;
    overflow: hidden;
    border: none;
    margin-top: -5px;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: -10;
    background-repeat: no-repeat;
  }
  
  .icheckbox_line.hover,
  .icheckbox_line.checked.hover,
  .iradio_line.hover {
    background: #339900;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    color: #FFF;
  }
  
  .icheckbox_line.checked,
  .iradio_line.checked {
    background: #CC0000;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    color: #FFF;
  }
  
  .icheckbox_line.checked .icheck_line-icon,
  .iradio_line.checked .icheck_line-icon {
    background-position: -40px 0;
  }
  
  .icheckbox_line.disabled,
  .iradio_line.disabled {
    background: #ccc;
    cursor: default;
  }
  
  .icheckbox_line.disabled .icheck_line-icon,
  .iradio_line.disabled .icheck_line-icon {
    background-position: -30px 0;
  }
  
  .icheckbox_line.checked.disabled,
  .iradio_line.checked.disabled {
    background: #ccc;
  }
  
  .icheckbox_line.checked.disabled .icheck_line-icon,
  .iradio_line.checked.disabled .icheck_line-icon {
    background-position: -45px 0;
  }
  
  
  /* HiDPI support */
  
  @media (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi),
  (min-resolution: 1.25dppx) {
    .icheckbox_line .icheck_line-icon,
    .iradio_line .icheck_line-icon {
      background-image: url(line@2x.png);
      -webkit-background-size: 60px 13px;
      background-size: 60px 13px;
    }
  }
  
  .iline_div {
    margin-left: 10px;
  }
  
  input[type=radio] {
    display: none;
  }
  
  input[type=radio]+label {
    background: #999;
    height: 16px;
    width: 16px;
    display: inline-block;
    padding: 0 0 0 0px;
  }
  
  input[type=radio]:checked+label {
    background: #0080FF;
    height: 16px;
    width: 16px;
    display: inline-block;
    padding: 0 0 0 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="FixBox"&gt;
    &lt;input type="radio" name="iCheck[&lt;?php echo $row_TQ01['SeqID']; ?&gt;]0" value="2" id="Action1_0"&gt;
    &lt;label class="hidden" for="Action1_0"&gt;Fix&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="FailBox"&gt;
    &lt;input type="radio" name="iCheck[&lt;?php echo $row_TQ01['SeqID']; ?&gt;]0" value="1" checked id="Action1_1"&gt;
    &lt;label for="Action1_1"&gt;Fail&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="PassBox"&gt;
    &lt;input type="radio" name="iCheck[&lt;?php echo $row_TQ01['SeqID']; ?&gt;]0" value="0" id="Action1_2"&gt;
    &lt;label class="hidden" for="Action1_2"&gt;Pass&lt;/label&gt;
  &lt;/div&gt;
  
  
  &lt;div id="PatTest"&gt;Test date:&lt;/div&gt;
  &lt;div id="PatTestDate"&gt;
    &lt;input name="PatTestDate" type="text" class="PatTestDateTest" id="datepicker" size="12" placeholder="PAT Test date"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>