jQuery Select Radio

jQuery Select Radio is a lightweight jQuery plugin that enhances the functionality of radio buttons. It adds CSS classes for styling and provides a way to retrieve the selected radio button value using jQuery selectors.

Installation

To use jQuery Select Radio, include jQuery and the plugin script in your HTML file:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.select-radio.js"></script>

Usage

To apply jQuery Select Radio to a group of radio buttons, simply select the group using a jQuery selector and call the selectRadio method:

$('input[type="radio"]').selectRadio();

This will apply the plugin to all radio buttons in the selected group.

Retrieving the selected value

To retrieve the selected value, use the val method on the selected radio button group:

var selectedValue = $('input[name="my-radio-group"]:checked').val();

Styling

jQuery Select Radio adds CSS classes to the selected radio button and its label for styling purposes. By default, the selected radio button gets the .selected class and its label gets the .selected-label class.

You can customize the CSS classes by passing options to the selectRadio method:

$('input[type="radio"]').selectRadio({
  selectedClass: 'my-selected-class',
  selectedLabelClass: 'my-selected-label-class'
});

Conclusion

jQuery Select Radio is a simple and lightweight jQuery plugin that enhances the functionality of radio buttons. It adds CSS classes for styling and provides a way to retrieve the selected radio button value using jQuery selectors.