JQuery Plugin That Makes All Radio Buttons Automatically Deslectable

Selectable radio buttons is a jQuery plugin that automatically makes all radio buttons selectable.

Mouse/click and keydown/keyup is used to detect interaction with the radio button. If the user clicks or presses the space bar on a specific radio button, it is deselected.

A custom event called done_changing fires next, so event handlers can do something after selecting the radio button’s new state.

Must Read: Hierarchical Tree With Radio Buttons Using Vanilla JS and Bootstrap | ninotree

How to make use of it:

1. Load the required jQuery JavaScript library on the HTML web page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Suppose you have a bunch of radio buttons on the web page.

<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label>

3. The primary JavaScript (jQuery script) to make these radio buttons unselectable is similar to checkboxes.

(function($){
  $(document).ready(function(){
    $(document.body).on('click mousedown keydown keyup', 'input[type="radio"]', function(e){
      let radioButton = $(e.target);
      if(('keydown' === e.type  && 32 === e.keyCode) || 'mousedown' === e.type){
        radioButton.data('originally_checked', radioButton.prop('checked'));
      }
      if(('keyup' === e.type && 32 === e.keyCode) || 'click' === e.type){
        if(radioButton.data('originally_checked')){
          radioButton.prop('checked', false).removeAttr('checked');
        } else {
          radioButton.prop('checked', true).attr('checked', 'checked');
        }
        radioButton.removeData('originally_checked').trigger('done_changing');
      }
    });
  });
}(jQuery));

4. Or load the deselectable-radio-buttons.js script after the jQuery library.

<script src="deselectable-radio-buttons.js"></script>

Deselect Radio Buttons With jQuery, Deselectable Radio Buttons Plugin/Github, how to get multiple radio button value in jquery

Read More – 

Making the Radio & Checkbox into a Box with Pure CSS | boxed-check.css
A Lightweight Web Component Assistant for HTML5 Videos | Video Radio Star


See Demo And Download

Official Website(reedhewitt): Click Here

This superior jQuery/javascript plugin is developed by reedhewitt. For extra Advanced Usage, please go to the official website.

Share