Radio radio.js

The radio control provides a customized look and feel that can be standardized across all browsers.

Usage

Via JavaScript

Call the radio control via JavaScript on the label. The div.radio container is only present for block level stying:

$('#myRadioLabel').radio();

Via data-attributes

The radio will automatically instantiate any radios with data-initialize="radio" located on the <label>. If you add the control markup after page load with data-initialize="radio", this control initializes on mouseover.

Deprecated radio button markup

Before v3.7.0, the radio control could be bound with $().radio(); or data-initialize="radio" to the div.radio or the input elements. This is no longer supported. Please update your markup and JavaScript to be bound to the label only.

Methods

.radio('check')
Ensures the radio is checked
.radio('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.radio('disable')
Ensures the radio is disabled
.radio('enable')
Ensures the radio is enabled
.radio('isChecked')
Returns true or false indicating the radio's checked state
.radio('uncheck')
Ensures the radio is not checked

Examples

Customized look and feel for radio button element

Default (stacked)


<div class="radio">
  <label class="radio-custom" id="myCustomRadioLabel" data-initialize="radio">
    <input class="sr-only" name="radioEx1" type="radio" value="option1">
    Browser-independent radio unchecked on page load
  </label>
</div>

<div class="radio checked">
  <label class="radio-custom" id="myCustomRadioLabel2" data-initialize="radio">
    <input class="sr-only" name="radioEx1" checked="checked" type="radio" value="option2">
    Browser-independent radio checked on page load
  </label>
</div>

<div class="radio checked">
  <label class="radio-custom disabled" id="myCustomRadioLabel3" data-initialize="radio">
    <input class="sr-only" name="radio1b" checked="checked" disabled="disabled" type="radio">
    <span class="radio-label">Disabled custom appearance radio selected on page load</span>
  </label>
</div>

<div class="radio">
  <label class="radio-custom disabled" id="myCustomRadioLabel4" data-initialize="radio">
    <input class="sr-only" name="radioEx2" disabled="disabled" type="radio" value="option3">
    Disabled browser-independent radio unchecked on page load
  </label>
</div>

Inline radio

Use the .radio-inline classes on radios for controls that appear on the same line.


<label class="radio-custom radio-inline" id="myCustomRadioLabel5" data-initialize="radio">
  <input class="sr-only" name="radioEx2" type="radio" value="option1"> 1
</label>
<label class="radio-custom radio-inline" id="myCustomRadioLabel6" data-initialize="radio">
  <input class="sr-only" name="radioEx2" checked="checked" type="radio" value="option2"> 2
</label>
<label class="radio-custom radio-inline disabled" id="myCustomRadioLabel7" data-initialize="radio">
  <input class="sr-only" name="radioEx2" disabled="disabled" type="radio" value="option3"> 3
</label>

Addon radios

Place any radio option within an input group's addon instead of text.


  <div class="input-group">
    <label class="input-group-addon radio-custom radio-inline" data-initialize="radio">
      <input class="sr-only" type="radio" value="option1">
    </label>
    <input class="form-control" type="text">
  </div>

Element toggling radios

Use the data-toggle="{{selector}}" to automatically show or hide elements matching the selector within the body upon check or uncheck. This function works with any jQuery selector.

ID-toggling container
Class-toggling container
Class-toggling container

<div class="radio">
  <label class="radio-custom" id="myCustomRadioLabel8" data-initialize="radio">
    <input class="sr-only" name="radioEx3" data-toggle="#radioToggleID" type="radio" value="option1">
    Toggles element with matching ID
  </label>
</div>
<label class="radio-custom radio-inline" id="myCustomRadioLabel9" data-initialize="radio">
  <input class="sr-only" name="radioEx3" data-toggle=".radioToggleCLASS" type="radio" value="option1">
  Toggles elements with matching class
</label>


<div class="alert bg-info" id="radioToggleID">ID-toggling container</div>
<div class="alert bg-success radioToggleCLASS">Class-toggling container</div>
<div class="alert bg-success radioToggleCLASS">Class-toggling container</div>

Highlighting radios

Use the .highlight class to add a background highlight upon check. 


<div class="radio highlight" id="myCustomRadioLabel10">
  <label class="radio-custom highlight" data-initialize="radio">
    <input class="sr-only" name="radioEx4" type="radio" value="option1">
    This block-level radio will highlight on check.
  </label>
</div>
<label class="radio-custom radio-inline highlight" id="myCustomRadio11" data-initialize="radio">
  <input class="sr-only" name="radioEx4" type="radio" value="option2">
  This inline radio will highlight on check.
</label>